这是一个假设的示例:

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>


我想让每一列的宽度都适合其内容的大小,并为“column-column”类保留一列的其余空间,使其看起来像这样:
| 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%宽度表中的所有剩余空间。

最佳答案

定义。吸收柱的宽度

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

在这里,我已将width设置为100%,因为它确保此列将占用最大的空间量,而没有定义宽度的列将减少以适应其内容,并且不再容纳更多内容。

这是表行为的古怪优点之一。 table-layout: auto算法在数学上是可以原谅的。

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

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>

关于html - 如何在HTML表格中获取<td>以适合内容,并让特定的<td>填写其余内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26915087/

10-11 12:48
查看更多