CSS溢出在数据表中不起作用

Question

当我想在表中显示大量数据时，单元格中的文本会被截断。

为了修复它，我尝试使用overflow-x:auto，但似乎不起作用。

我现在拥有的，(引导版本3.3.6(

<div class="box" style="overflow-x: auto; height: 90%">
<div class="box-header">
<div style="font-size: 18px;">TABLE</div>
</div>
<div class="box-body">
<table id="test" class="table table-bordered table-striped">
<tbody>
<tr>
<td style="overflow-x:auto;">...</td> // Here is what I tried with overflow
</tr>
</tbody>
</table>
</div>
</div>

这是我的CSS

.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}

数据表似乎并不包含所有数据。

有什么办法解决的吗？

Answer 1

您需要设置表格布局：fixed；在css中为表选择器添加溢出：hidden；以使文本溢出工作。

.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
table-layout: fixed; <<<< add this
}
td {
overflow: hidden; <<<<< and this
text-overflow: ellipsis;
}

Stackblitz示例