简单的方案:
<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>的宽度是一样的。
当前回答
当我不需要处理IE时，我经常这样做
<tr>
<th scope="col" style="width: calc(1 * 100% / 12)">#</th>
<th scope="col" style="width: calc(4 * 100% / 12)">Website</th>
<th scope="col" style="width: calc(3 * 100% / 12)">Username</th>
<th scope="col" style="width: calc(3 * 100% / 12)">Password</th>
<th scope="col" style="width: calc(1 * 100% / 12)">Action</th>
</tr>
这样你就可以有一个熟悉的12 col网格。
其他回答
您可以创建一个colgroup并将这些类应用到col标记，而不是将col-md-*类应用到行中的每个td。
<table class="table table-striped">
<colgroup>
<col class="col-md-4">
<col class="col-md-7">
</colgroup>
<tbody>
<tr>
<td>Title</td>
<td>Long Value</td>
</tr>
</tbody>
</table>
演示
如果在表上使用<table class="table">， Bootstrap的表类将为表添加100%的宽度。您需要将宽度更改为自动。
此外，如果表的第一行是标题行，则可能需要将宽度添加到th而不是td。
在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>
希望这篇文章能帮助到一些人:
<table class="table">
<thead>
<tr>
<th style="width: 30%">Col 1</th>
<th style="width: 20%">Col 2</th>
<th style="width: 10%">Col 3</th>
<th style="width: 30%">Col 4</th>
<th style="width: 10%">Col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val 1</td>
<td>Val 2</td>
<td>Val 3</td>
<td>Val 4</td>
<td>Val 5</td>
</tr>
</tbody>
</table>
https://github.com/twbs/bootstrap/issues/863
试试这个——
<style>
table { table-layout: fixed; }
table th, table td { overflow: hidden; }
</style>
