表格列的最佳自动宽度答案

【问题标题】：Optimal auto width for table columns表格列的最佳自动宽度
【发布时间】：2021-08-29 09:09:56
【问题描述】：

我正在创建一个表格来检查表格数据（如 SQL 查询的结果）并尝试找到最佳布局。

我不知道数字列或其内容，我只知道有些列可能是窄的，有些是宽的。并且该表不应超过其容器的 100%，并且列不应换行，可以隐藏溢出。并且应该以合理的方式利用可用空间。

如何做到这一点？我试过table-layout: fixed（没有它，桌子不会尊重width: 100%并占用更大的空间）但布局并没有利用所有可用空间（见下面的截图）。有没有更好的方法？也许涉及一些 JS 计算（我正在使用 Svelte）？

一个可能的改进是 - 如果列很窄，就让它变窄。但是在下面的示例中，窄列“Aaa”仍然占用了它不需要的额外空间。

示例：

table {
  width:        100%;
  table-layout: fixed;
}

table td {
  white-space:   nowrap;
}

table td {
  overflow:      hidden;
  text-overflow: ellipsis;
}

<html>
<body>

<table>
  <tr>
    <td>Aaa</td>
    <td>Bbb bbb bbb bbb bb bbbbbb bb bbbbbb bb bbbbbb bbbbbbbb bb  bbbbbb bb  bbbbbb bb bbbbbb bb</td>
    <td>Ccc cc c ccccc c cccc</td>
  </tr>

</table>

</body>
</html>

附言

请注意white-space: nowrap; - 类似问题Table overflowing outside of div 的解决方案不适用于white-space: nowrap; 选项。

【问题讨论】：

你绝对不想要table-layout:fixed，因为这会使你的列宽度相等。如果您只是将布局设置为自动并将宽度设置为 100%，那么您应该拥有您想要的。
@Ant 没有table-layout:fixed 表不会尊重width: 100% 并且比其父容器占用更多空间。
哦，这改变了事情......你实际上想要自动布局但在父级的宽度内，我很确定如果没有对表格宽度的一些硬限制或一堆javascript中的计算。你也应该看看here
max-width 代替？
这能回答你的问题吗？ Table overflowing outside of div

标签： html css

【解决方案1】：

您需要一点 JavaScript 才能有一个 100% 的固定表格，其中包含截断的内容并且没有溢出。 table-layout: fixed 是无用的，除非您明确设置列宽，并且由于列数和单元格内容的长度都是可变的，因此处理它的最有效方法是确保每列的宽度相等。

使用table rows cells collection properties 获取<td> 在<tr> 中的数量

const numberOfColumns = table.rows[0].cells.length;

然后用 100 除以列数

let columnWidth = `${100 / numberOfColumns}%`;

将该数字作为百分比宽度应用于第一个<tr> 的每个<td>

[...table.rows[0].cells].forEach(td => td.style = columnWidth);

注意：第一个示例不会针对空单元格进行调整，因为当您有多个行时它是没有意义的。添加示例 2 以显示如何调整空单元格（不建议用于多行表格）。基本上它为每列分配 1% 的宽度，然后为每个具有文本的 <td> 分配以下百分比宽度（按索引号跟踪）：

arrayOfIndices.forEach(index => table.rows[0].cells[index].style.width = `${(100 - numberOfEmpty)/arrayOfIndices.length}%`);

示例 1

const table = document.querySelector('table');
const columns = table.rows[0].cells.length;
[...table.rows[0].cells].forEach(td => td.style = `${100/columns}%`);

table {
  width: 100%;
  table-layout: fixed;
}

td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<main>
  <table>
    <tr>
      <td>xxxxxxxxxxxx</td>
      <td>xxxxxxxxxxxx</td>
      <td>xxxxxxxxxxxx</td>
      <td>xxxxxxxxxxxx</td>
      <td>xxxxxxxxxxxx</td>
      <td>xxxxxxxxxxxx</td>
      <td>xxxxxxxxxxxx</td>
      <td>xxxxxxxxxxxx</td>
    </tr>
  </table>
</main>

注意：<td>s 具有交替的背景颜色。空单元格的宽度为 1%（第 2 个和第 5 个单元格）。

示例 2

const table = document.querySelector('table');
const columns = table.rows[0].cells.length;
const fullCells = [...table.rows[0].cells].flatMap((td, idx) => td.textContent.length > 0 ? [idx] : []); 
const newWidth = 100 - (columns - fullCells.length);
[...table.rows[0].cells].forEach(td => td.style.width = '1%');
fullCells.forEach(index => table.rows[0].cells[index].style.width = `${newWidth/fullCells.length}%`);

table {
  width: 100%;
  table-layout: fixed;
}

td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

td:nth-child(odd) {
  background: tomato;
}

td:nth-child(even) {
  background: cyan;
}

<main>
  <table>
    <tr>
      <td>AAAAAAAAAAAA</td>
      <td></td>
      <td>CCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
      <td>DDDDDDDDDDDDDDDDDDDDDDDDDDDD</td>
      <td></td>
      <td>FFFFFFFFFFFF</td>
      <td>GGGGGGGGGGGG</td>
      <td>HHHHHHHHHHHH</td>
    </tr>
  </table>
</main>

【讨论】：