如何扩展一个 table 单元格，而所有其他单元格的最小宽度？

Question

假设我有以下 table:

<table style="width: 100%;">
  <tr>
    <td>some content</td>
    <td>some other content</td>
    <td class="long">some longer content in a cell I want expanded</td>
    <td>more content</td>
    <td>and some more</td>
  </tr>
</table>

因此，table 将扩展到页面的整个宽度，并且每个单元格将按比例扩展。

我想要实现的是让所有单元格都有最小宽度（根据它们各自的内容），并让带有“长”class 的单元格展开并填充其余部分可用宽度。

Answer 1

试试这个，它可能会有帮助

<table style="border: 1px solid black;
  border-collapse: collapse;
  width: 100%;">
  <tr>
    <td>some content</td>
    <td>some other content</td>
    <td class="long">some longer content in a cell I want expanded</td>
    <td>more content</td>
    <td>and some more</td>
  </tr>
</table>

Answer 2

您可以定位所有其他没有 .long class 的 td 并将它们的宽度设置为 0。这将导致它们折叠到最长单词的宽度。然后添加 'white-space: nowrap;' 让它们扩展到文本的宽度。

td:not(.long) {
    width: 0;
    white-space: nowrap;
}

如何扩展一个 table 单元格，而所有其他单元格的最小宽度？

How to have one table cell expanded and all the others their minimum width?

html

css

html-table