将手风琴表设置在手风琴外面

Question

我有一个HTML表格，我保存在bootstrap的手风琴中，我正在接受用户的输入，只要输入太长，表格就会越来越多。如何设置固定宽度，让它垂直扩展。

<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/