简单的方案:
<tr class="something">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
我需要为<td>设置一个固定宽度。我试过了:
tr.something {
td {
width: 90px;
}
}
Also
td.something {
width: 90px;
}
for
<td class="something">B</td>
甚至
<td style="width: 90px;">B</td>
但是<td>的宽度是一样的。
当前回答
对我来说，将表的布局设置为自动，并针对特定列的<th>就可以了。我发现在任何行中定位<td>也可以。如果需要的话，请随意加入!important。
.table {
table-layout: auto;
}
th {
width: 10%;
}
其他回答
这些对我来说都不工作，并且在数据表上有许多cols，使%或sm类等于12个元素布局。
我正在使用Angular 5和Bootstrap 4的数据表，并且在表中有很多col。我的解决方案是在TH中添加一个具有特定宽度的DIV元素。例如，对于cols“Person Name”和“Event date”，我需要一个特定的宽度，然后在col标题中放一个div，整个col宽度然后调整为从TH上的div指定的宽度:
<table datatable [dtOptions]="dtOptions" *ngIf="listData" class="table table-hover table-sm table-bordered text-center display" width="100%">
<thead class="thead-dark">
<tr>
<th scope="col">ID </th>
<th scope="col">Value</th>
<th scope="col"><div style="width: 600px;">Person Name</div></th>
<th scope="col"><div style="width: 800px;">Event date</div></th> ...
对我来说，将表的布局设置为自动，并针对特定列的<th>就可以了。我发现在任何行中定位<td>也可以。如果需要的话，请随意加入!important。
.table {
table-layout: auto;
}
th {
width: 10%;
}
这个组合解决方案为我工作，我想要等宽的列
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
}
table th, table td {
overflow: hidden;
}
</style>
结果:-
试试这个——
<style>
table { table-layout: fixed; }
table th, table td { overflow: hidden; }
</style>
在我的案例中，我能够通过使用min-width: 100px而不是width: 100px来修复单元格th或td的问题。
.table td, .table th {
min-width: 100px;
}
