简单的方案:

  <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>的宽度是一样的。


当前回答

在我的案例中,我能够通过使用min-width: 100px而不是width: 100px来修复单元格th或td的问题。

.table td, .table th {
    min-width: 100px;
}

其他回答

我已经为这个问题纠结了一段时间了,所以以防万一有人和我犯同样愚蠢的错误…… 在<td>中,我应用了带有white-space:pre style的元素。这使得我所有的table/tr/td技巧都被丢弃了。当我删除该样式时,突然间我所有的文本都在td中被很好地格式化了。

所以,总是检查主容器(如table或td),但也总是检查你是否在更深的地方取消你的beautifull代码:)

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

希望这将有助于其他人在那里!

干杯!

对于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>
      ...

希望这篇文章能帮助到一些人:

<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

好的,我刚刚找出了问题所在-在引导设置为默认值宽度选择元素,因此,解决方案是:

tr. something {
  td {
    select {
      width: 90px;
    }
  }
}

其他的都对我没用。