如何获得<td>在 HTML 表格中以适合内容，并让特定的 <td>填写其余部分 [英] How to get the <td> in HTML tables to fit content, and let a specific <td> fill in the rest

问题描述

这是一个假设的例子:

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>

我希望每一列的宽度都适合其内容大小，并将剩余的空间留给具有吸收列"类的一列，使其看起来像这样:

I want to have every single column's width to fit its content size, and leave the rest of the space for the one column with the "absorbing-column" class, so that it looks like this:

| 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列总是用完剩余空间.

You see, Column B is a bit bigger than the rest due to the extra data in the first row, but Column D always uses up the remaining space.

我尝试了 max-width、min-width、auto 等方法，但不知道如何实现这一点.

I played around with max-width, min-width, auto, etc. and could not figure out how to make this work.

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

In other words, I want all columns to take whatever width they need and not more, and then I want Column D to use up all of the remaining space inside the 100% width table.

推荐答案

定义 .taking-column 的宽度

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

Define width of .absorbing-column

Set table-layout to auto and define an extreme width on .absorbing-column.

这里我将 width 设置为 100% 因为它确保该列将占用允许的最大空间量，而未定义宽度的列将减少以适应他们的内容，而不是进一步.

Here I have set the width to 100% because it ensures that this column will take the maximum amount of space allowed, while the columns with no defined width will reduce to fit their content and no further.

这是表格行为的古怪好处之一.table-layout: auto 算法在数学上是宽容的.

This is one of the quirky benefits of how tables behave. The table-layout: auto algorithm is mathematically forgiving.

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

You may even choose to define a min-width on all td elements to prevent them from becoming too narrow and the table will behave nicely.

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>

这篇关于如何获得<td>在 HTML 表格中以适合内容，并让特定的 <td>填写其余部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！