简单的方案:

  <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%;
}

其他回答

对于引导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>元素。

试试这个——

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>

在引导表4.x中

如果您在初始化参数中创建表,而不是使用HTML。

你可以在columns属性中指定width参数:

$("table").bootstrapTable({
    columns: [
        { field: "title", title: "title", width: "100px" }
    ]
});

在引导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>

我也遇到过这个问题,我用这个方法来克服…所以你可以试试

<td style=“min-width:120px;”>B</td>