如何获取 HTML 表格中的 <td> 以适应内容，并让特定的 <td> 填充其余部分

Posted 2023-03-05

【中文标题】如何获取 HTML 表格中的 <td> 以适应内容，并让特定的 <td> 填充其余部分

【英文标题】：How to get the <td> in HTML tables to fit content, and let a specific <td> fill in the rest

【发布时间】：2015-01-10 23:09:12

【问题描述】：

这是一个假设的例子：

table, thead, tbody, tr  width: 100%; 
    table  table-layout: fixed 
    table > thead > tr > th  width: auto; 

<table>
      <thead>
        <tr>
          <th>Column A</th>
          <th>Column B</th>
          <th>Column C</th>
          <th class="absorbing-column">Column D</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data A.1 lorem</td>
          <td>Data B.1 ip</td>
          <td>Data C.1 sum l</td>
          <td>Data D.1</td>
        </tr>
        <tr>
          <td>Data A.2 ipsum</td>
          <td>Data B.2 lorem</td>
          <td>Data C.2 some data</td>
          <td>Data D.2 a long line of text that is long</td>
        </tr>
        <tr>
          <td>Data A.3</td>
          <td>Data B.3</td>
          <td>Data C.3</td>
          <td>Data D.3</td>
        </tr>
      </tbody>
    </table>

我想让每一列的宽度适合其内容大小，并将剩余空间留给具有“吸收列”类的一列，使其看起来像这样：

| html                                                                   | 100%
| body                                                                   | 100%
| table                                                                  | 100%
|------------------------------------------------------------------------|
| Column A | Column B       | Column C | Column D                        |
|------------------------------------------------------------------------|
| Column A | Column B lorem | Column C | Column D                        |
| Column A | Column B       | Column C | Column D                        |
| Column A | Column B       | Column C | Column D                        |
|------------------------------------------------------------------------|

你看，由于第一行有多余的数据，B列比其他列大一点，但D列总是用完剩余的空间。

我玩弄了 max-width、min-width、auto 等，但不知道如何使它工作。

换句话说，我希望所有列都采用它们需要的任何宽度，而不是更多，然后我希望列 D 用完 100% 宽度表内的所有剩余空间。

【参考方案1】：

定义吸收列的宽度

将table-layout 设置为auto 并在.absorbing-column 上定义一个极端宽度。

在这里，我将width 设置为100%，因为它确保该列将占用允许的最大空间量，而没有定义宽度的列将缩小以适应其内容，不再进一步。

这是表格行为方式的奇特好处之一。 table-layout: auto 算法在数学上是宽容的。

您甚至可以选择在所有td 元素上定义一个min-width，以防止它们变得太窄并且表格会表现得很好。

table 
    table-layout: auto;
    border-collapse: collapse;
    width: 100%;

table td 
    border: 1px solid #ccc;

table .absorbing-column 
    width: 100%;

<table>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
      <th class="absorbing-column">Column D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data A.1 lorem</td>
      <td>Data B.1 ip</td>
      <td>Data C.1 sum l</td>
      <td>Data D.1</td>
    </tr>
    <tr>
      <td>Data A.2 ipsum</td>
      <td>Data B.2 lorem</td>
      <td>Data C.2 some data</td>
      <td>Data D.2 a long line of text that is long</td>
    </tr>
    <tr>
      <td>Data A.3</td>
      <td>Data B.3</td>
      <td>Data C.3</td>
      <td>Data D.3</td>
    </tr>
  </tbody>
</table>

【讨论】：

“吸收列”类不适用于“th”？

@NaturalBornCamper 不错的收获。我已经更新了我的示例，仅将类应用于th，就像 OP 的 sn-p 一样，我已经修改了 CSS 以匹配。但效果是一样的，因为正如我所指出的，表格布局算法是宽容的。即使应用到列中的一个单元格的宽度，如果没有被更具体的规则覆盖，将导致宽度应用于列中的所有单元格。如果通过两个或多个具有相同特性的规则将不同的宽度应用于分隔单元格，则使用最大宽度来布局该列（无论如何这在 Chrome 中似乎都是如此）。

在我的实验中，这个答案不会阻止第一列包含内容。在我看来，@Vitorino Fernandes 的回答效果更好。

这是一个很好的观察。我的答案中没有包含white-space: nowrap 规则，因为它可能导致表格溢出其容器，这是不可取的，但我应该直接解释这一点。我确实提到min-width 可以用在td 元素上，可以达到类似的效果，但它并没有直接解决OPs 的要求。我也喜欢@Vitorino fernandes 的回答。不过，也可以通过在 table td:last-child 上重置 white-space: normal 来改进它，以帮助避免容器溢出。

table-layout: auto 在我的情况下实际工作

【参考方案2】：

演示 - http://jsfiddle.net/victor_007/ywevz8ra/

添加边框以获得更好的视图（测试）

更多关于white-space的信息

table
    width:100%;

table td
    white-space: nowrap;  /** added **/

table td:last-child
    width:100%;

    table 
      width: 100%;
    
    table td 
      white-space: nowrap;
    
    table td:last-child 
      width: 100%;
    

<table border="1">
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
      <th class="absorbing-column">Column D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data A.1 lorem</td>
      <td>Data B.1 ip</td>
      <td>Data C.1 sum l</td>
      <td>Data D.1</td>
    </tr>
    <tr>
      <td>Data A.2 ipsum</td>
      <td>Data B.2 lorem</td>
      <td>Data C.2 some data</td>
      <td>Data D.2 a long line of text that is long</td>
    </tr>
    <tr>
      <td>Data A.3</td>
      <td>Data B.3</td>
      <td>Data C.3</td>
      <td>Data D.3</td>
    </tr>
  </tbody>
</table>

【讨论】：

如果“吸收列”不在末尾（当然，我的意思是不使用 :last-child，我可以使用一个类并且它对任何列的影响都相同）吗？

是的，但您需要为所有最后一个孩子添加.absorbing column fiddle @user2985898

@user2985898 - 看起来您可以使用nth-child 指定列：jsfiddle.net/5ht73hpc

如果文本比单元格宽，它会使表格比其容器宽

@DanV 要解决比其容器更宽的表格，只需添加'white-space：initial;'到 'td:last-child'。

【参考方案3】：

根据我能找到的所有规范，将 CSS 宽度设置为元素的 1% 或 100% 与父元素有关。尽管在撰写本文时，Blink Rendering Engine (Chrome) 和 Gecko (Firefox) 似乎可以很好地处理 1% 或 100%（使列缩小或列以填充可用空间），但根据所有 CSS 规范并不能保证我可以找到正确渲染它。

一种选择是用 CSS4 flex div 替换表格：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这适用于新浏览器，即 IE11+，请参阅文章底部的表格。

【参考方案4】：

使用溢出：

overflow: visible;