html - 设置 Accordion 外的 Bootstrap 表

Question

我有一个 HTML 表格，我保存在 bootstrap 的 Accordion 中，我从用户那里获取输入，只要输入太长，表格就会超出 Accordion 。怎么设置宽度固定，让它垂直展开。

<table id="recordTable" class="table table-bordered table-striped">
                    <thead>
                        <tr>                    
                            <th class="col-md-1">Question Number</th>
                            <th class="col-md-6">Question Text</th>
                            <th class="col-md-3">upload Document(if any)</th>
                            <th class="col-md-1">Document uploaded?</th>

                            <th class="col-md-1">Delete</th>
                        </tr>

                    </thead>

                    <tbody>


                            <tr>
                                <td class="ques_id col-md-1">12  </td>
                                <td class="ques_text col-md-6">asd</td>
                                <td class="ques_file col-md-3"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
                                <td class="fileuploadSuccess col-md-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>                                 
                                <td class="col-md-1"><a href="#" id="deleteButton" class="btn btn-primary">delete</a></td>
                            </tr>

                            <tr>
                                <td class="ques_id col-md-1">14  </td>
                                <td class="ques_text col-md-6">asd</td>
                                <td class="ques_file col-md-3"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
                                <td class="fileuploadSuccess col-md-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>                                 
                                <td class="col-md-1"><a href="#" id="deleteButton" class="btn btn-primary">delete</a></td>
                            </tr><tr><td class="ques_id">15</td><td class="ques_text">sdfdfgdfgaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><td class="ques_file"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td><td class="fileuploadSuccess"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td><td><a href="#" id="deleteButton" class="btn btn-primary">delete</a></td></tr>




                    </tbody>


                </table>

这是图像的屏幕截图。

jsfiddle 链接:https://jsfiddle.net/govi20/obnpjt7h/

Answer 1

将此属性 word-break: break-all; 添加到 td 标记

另一种向表外部元素添加类的方法 table-responsive

<div class="table-responsive">
  <table class="table table-bordered table-striped">
    ...
  </table>
</div>

https://jsfiddle.net/obnpjt7h/1/