如何获取HTML表以适应内容,并让其他填充填写

发布时间：2020-12-14 21:39:26 所属栏目：资源来源：网络整理

导读：这是一个假设的例子： htmlhead ... style html,body,table,thead,tbody,tr { width: 100%; } table { table-layout: fixed } table thead tr th { width: auto; } /style/headbodytable thead tr thColumn A/th thColumn B/th thColumn C/th th class="abso

这是一个假设的例子：

<html>
<head>
  ...
  <style>
    html,body,table,thead,tbody,tr { width: 100%; }
    table { table-layout: fixed }
    table > thead > tr > th { width: auto; }
  </style>
</head>
<body>
<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>
</body>
</html>

我想让每一列的宽度适合其内容大小，并留下其余的空格为“列列”吸收列，使其看起来像这样：

| 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列比其余部分大一些，但是Column D总是占用剩余空间。

我玩的是最大宽度，最小宽度，自动等等，无法弄清楚如何使这项工作。

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

解决方法

定义.absorbing-column的宽度

将表格布局设置为自动，并在.absorbing-column上定义极限宽度。

这里我将宽度设置为100％，因为它确保此列将占用最大允许的空间，而没有定义宽度的列将减少以适应其内容，而不会进一步。

这是表格行为的奇怪的好处之一。表布局：自动算法在数学上是宽容的。

您甚至可以选择在所有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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!