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

Question

这是一个假设的例子：

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% 宽度表内的所有剩余空间。

Answer 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>

Answer 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>

Answer 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+，请参阅文章底部的表格。

Answer 4

使用溢出：

overflow: visible;