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

问题描述

这是一个假设的例子：

< tr {width：100％; } table {table-layout：fixed}表格> thead> tr> th {width：auto; }

< table> < THEAD> < TR>第A列第< />第B列第b列<>列C< / th> < th class =absorb-column>列D< / th> < / TR> < / THEAD> < TBODY> < TR> < td>数据A.1 lorem< / td> < td>数据B.1 ip< / td> < td> Data C.1 sum l< / td> < td>数据D.1< / td> < / TR> < TR> < td>数据A.2 ipsum< / td> < td> Data B.2 lorem< / td> < td>数据C.2一些数据< / td> < td>数据D.2很长的一行文字 < / TR> < TR> < td>数据A.3< / td> < td>数据B.3< / td> < td>数据C.3< / td> < td>数据D.3< / td> < / TR> < / tbody的> < / table>

我想让每一列的宽度以适应其内容大小，并使用吸收列类保留其中一列的空间，使其看起来像这样：

  | HTML | 100％
 | body | 100％
 |表| | 100％
 | ------------------------------------------- ----------------------------- | 
 |列A | B列|列C | D列| 
 | --------------------------------------------- --------------------------- | 
 |列A | B列lorem |列C | D列| 
 |列A | B列|列C | D列| 
 |列A | B列|列C | D列| 
 | --------------------------------------------- --------------------------- | 
  

您会发现，由于第一行中的额外数据，列B比其他列稍大，但列D总是用尽剩余空间。

我玩过最大宽度，最小宽度，自动等等，并且无法弄清楚如何制作这项工作。

换句话说，我希望所有列都可以采取他们需要的任何宽度，而不是更多，然后我想让列D用尽所有剩余空间里面的100％宽度表。

解决方案

定义宽度.absorbing-column

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

在这里，我已将宽度设置为 100％，因为它确保这个列将获得最大的空间容量，而没有定义宽度的列会减少以适应他们的内容，并且不会再有更多。

这是一个古怪的好处之一适合表的行为方式。 table-layout：auto 算法在数学上是可以宽容的。

你甚至可以选择定义一个<$ c $对所有 td 元素使用 min-width 来防止它们变得太窄，并且表格会表现得很好。

table {table-layout：auto;边界崩溃：崩溃;宽度：100％;} table td {border：1px solid #ccc;} table .absorbing-column {width：100％;}

 < table> < THEAD> < TR>第A列第< />第B列第b列<>列C< / th> < th class =absorb-column>列D< / th> < / TR> < / THEAD> < TBODY> < TR> < td>数据A.1 lorem< / td> < td>数据B.1 ip< / td> < td> Data C.1 sum l< / td> < td>数据D.1< / td> < / TR> < TR> < td>数据A.2 ipsum< / td> < td> Data B.2 lorem< / td> < td>数据C.2一些数据< / td> < td>数据D.2很长的一行文字 < / TR> < TR> < td>数据A.3< / td> < td>数据B.3< / td> < td>数据C.3< / td> < td>数据D.3< / td> < / TR> < / tbody>< / table>  

This is a hypothetical example:

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

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.

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

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.

解决方案

Define width of .absorbing-column

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

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.

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

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>

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