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

前端之家收集整理的这篇文章主要介绍了如何获取HTML表以适应内容,并让其他填充填写前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是一个假设的例子:
<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>
原文链接:https://www.f2er.com/html/233053.html

猜你在找的HTML相关文章