简单的方案:

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


当前回答

我也有同样的问题,我让表固定,然后指定我的td宽度。如果你有,你也可以做这些。

table {
    table-layout: fixed;
    word-wrap: break-word;
}

模板:

<td style="width:10%">content</td>

请使用CSS来构造任何布局。

其他回答

我也有同样的问题,我让表固定,然后指定我的td宽度。如果你有,你也可以做这些。

table {
    table-layout: fixed;
    word-wrap: break-word;
}

模板:

<td style="width:10%">content</td>

请使用CSS来构造任何布局。

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

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

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

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

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

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

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

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

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