简单的方案:
<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>的宽度是一样的。
当前回答
如果在表上使用<table class="table">， Bootstrap的表类将为表添加100%的宽度。您需要将宽度更改为自动。
此外，如果表的第一行是标题行，则可能需要将宽度添加到th而不是td。
其他回答
使用不带td和th的。something
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <style> .something { width: 90px; background: red; } </style> </head> <body> <div class="container"> <h2>Fixed width column</h2> <table class="table table-bordered"> <thead> <tr> <th class="something">Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> </body> </html>
使用固定的表布局CSS在表，并设置一个百分比的td。
在引导4你可以使用row和col-*在表，我使用它如下
<table class="table">
<thead>
<tr class="row">
<th class="col-sm-3">3 row</th>
<th class="col-sm-4">4 row</th>
<th class="col-sm-5">5 row</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-sm-3">some text</td>
<td class="col-sm-4">some text</td>
<td class="col-sm-5">some text</td>
</tr>
</tbody>
</table>
在我的案例中，我能够通过使用min-width: 100px而不是width: 100px来修复单元格th或td的问题。
.table td, .table th {
min-width: 100px;
}
引导4.0
在Bootstrap 4.0中，我们必须通过添加类d-flex来声明表行为flex-box，并删除xs, md，后缀以允许Bootstrap自动从视口派生它。
它看起来是这样的:
<table class="table">
<thead>
<tr class="d-flex">
<th class="col-2"> Student No. </th>
<th class="col-7"> Description </th>
<th class="col-3"> Amount </th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-2">test</td>
<td class="col-7">Name here</td>
<td class="col-3">Amount Here </td>
</tr>
</tbody>
</table>
希望这将有助于其他人在那里!
干杯!
