我有一个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/
答案 0 :(得分:2)
将此属性word-break: break-all;
添加到td
代码
另一种方法是将类添加到表外元素table-responsive
<div class="table-responsive">
<table class="table table-bordered table-striped">
...
</table>
</div>