简单的方案:
<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>的宽度是一样的。
当前回答
在引导表4.x中
如果您在初始化参数中创建表，而不是使用HTML。
你可以在columns属性中指定width参数:
$("table").bootstrapTable({
columns: [
{ field: "title", title: "title", width: "100px" }
]
});
其他回答
引导程序4和5有一个宽度实用程序，用于调整html元素的宽度 例子:
<tr class="w-50">
<td class="w-25">A</td>
...
</tr>
这些对我来说都不工作，并且在数据表上有许多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> ...
我也遇到过这个问题，我用这个方法来克服…所以你可以试试
<td style=“min-width：120px;”>B</td>
如果没有页面html或其他CSS的上下文，就很难判断。你的CSS规则不影响td元素可能有无数个原因。
您是否尝试过更具体的CSS选择器，例如
tr.somethingontrlevel td.something {
width: 90px;
}
这可以避免您的CSS被来自引导CSS的更具体的规则所覆盖。
(顺便说一下，在你的内联CSS样本样式属性，你拼错了宽度-这可以解释为什么尝试失败!)
在Bootstrap 4中使用d-flex代替row表示“tr”
问题是“row”类比父容器占用更大的宽度，这就产生了问题。
<table class=“table”> <tbody> <tr class=“d-flex”> <td class=“col-sm-8”>你好</td> <td class=“col-sm-4”>World</td> </tr> <tr class=“d-flex”> <td class=“col-sm-8”>8 列</td> <td class=“col-sm-4”>4 列</td> </tr> </tbody> </table>
