我的表格的其中一列中有很长的文字。所以我正在使用引导程序提供的折叠/展开按钮来隐藏/显示长文本(单元格数据)。
但是,当我单击按钮以折叠/展开文本时,表格会闪烁并水平调整大小。
在该表数据折叠/展开期间,如何防止表列水平调整大小?并允许仅在该列宽范围内垂直限制文本扩展吗?
以下是HTML供参考。
<table id="query_table" class="table table-bordered table-striped table-hover">
<thead>
<th>ID</th>
<th>Name</th>
<th>Topic</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>9</td>
<td>ORDER_ZONE</td>
<td>2018-06-18 21:47:31.0</td>
<td>
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample_9" aria-expanded="true"
aria-controls="collapseExample_9">
Show/hide Description
</button>
<div class="collapse" id="collapseExample_9">
<div class="card card-body">
SOME VERY VERY VERY VERY LONG TEXT HERE
</div>
</div>
</td>
</tr>
<tr>
<td>9</td>
<td>ORDER_ZONE</td>
<td>2018-06-18 21:47:31.0</td>
<td>
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample_10" aria-expanded="true"
aria-controls="collapseExample_10">
Show/hide Description
</button>
<div class="collapse" id="collapseExample_10">
<div class="card card-body">
ANOTHER VERY VERY VERY VERY LONG TEXT HERE
</div>
</div>
</td>
</tr>
</tbody>
</table>
最佳答案
使用表格布局:表格固定为CSS,您可能必须为表格本身和/或其单元格指定一些固定宽度。