简单的方案:

  <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和5有一个宽度实用程序,用于调整html元素的宽度 例子:

<tr class="w-50">
    <td class="w-25">A</td>
    ...
</tr>

对我来说,将表的布局设置为自动,并针对特定列的<th>就可以了。我发现在任何行中定位<td>也可以。如果需要的话,请随意加入!important。

.table {
  table-layout: auto;
}

th {
 width: 10%;
}

试试这个——

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

在我的例子中,我是这样解决的

<style>
td {
    min-width: 175px;
}
</style>

因此每个表格单元格的最小宽度为175px。您可以更改该值以使其适合您的目的。

你可以在这里找到更多关于min-width的信息:https://developer.mozilla.org/en-US/docs/Web/CSS/min-width?retiredLocale=de

使用不带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>