如何为<td>设置固定宽度?

简单的方案:

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

当前回答

使用固定的表布局CSS在表，并设置一个百分比的td。

其他回答

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

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

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

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

如果没有页面html或其他CSS的上下文，就很难判断。你的CSS规则不影响td元素可能有无数个原因。

您是否尝试过更具体的CSS选择器，例如

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

这可以避免您的CSS被来自引导CSS的更具体的规则所覆盖。

(顺便说一下，在你的内联CSS样本样式属性，你拼错了宽度-这可以解释为什么尝试失败!)

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

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

其他的都对我没用。

在引导表4.x中

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

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

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

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

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

推荐文章