简单的方案:
<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.0:
在Bootstrap 4.0.0中，你不能可靠地使用col-*类(适用于Firefox，但不适用于Chrome)。 你需要使用OhadR的答案:
<tr>
<th style="width: 16.66%">Col 1</th>
<th style="width: 25%">Col 2</th>
<th style="width: 50%">Col 4</th>
<th style="width: 8.33%">Col 5</th>
</tr>
对于Bootstrap 3.0:
用twitter引导3使用:class="col-md-*"其中*是宽度的列数。
<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>
</tr>
对于Bootstrap 2.0:
与twitter引导2使用:class="span*"，其中*是宽度的列数。
<tr class="something">
<td class="span2">A</td>
<td class="span3">B</td>
<td class="span6">C</td>
<td class="span1">D</td>
</tr>
**如果你有<th>元素设置宽度，而不是<td>元素。
其他回答
您可以创建一个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>
演示
对于Bootstrap 4，你可以简单地使用类帮助器:
<table class="table">
<thead>
<tr>
<td class="w-25">Col 1</td>
<td class="w-25">Col 2</td>
<td class="w-25">Col 3</td>
<td class="w-25">Col 4</td>
</tr>
</thead>
<tbody>
<tr>
...
试试这个——
<style>
table { table-layout: fixed; }
table th, table td { overflow: hidden; }
</style>
希望这篇文章能帮助到一些人:
<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
对我来说，将表的布局设置为自动，并针对特定列的<th>就可以了。我发现在任何行中定位<td>也可以。如果需要的话，请随意加入!important。
.table {
table-layout: auto;
}
th {
width: 10%;
}
