当表格宽度=100% 时，HTML 表格中的第一列是灵活的

【问题标题】：Have first column in HTML table flexible when table width=100%当表格宽度=100% 时，HTML 表格中的第一列是灵活的
【发布时间】：2023-03-15 07:55:01
【问题描述】：

我有一个包含 8 列和多行的 HTML 表格。每个单元格的内容是动态生成的，很难预测任何列的宽度。我设置 table width=100% 因为我希望表格占据 div 的整个宽度。我希望第 2 列到第 8 列保持与宽度相同，就好像我没有设置表格宽度一样。然后我想让第一列扩大它的宽度，使表格宽度变为 100%。这可能吗？

【问题讨论】：

标签： html html-table

【解决方案1】：

在表格和所有其他列上设置宽度；剩下的列将占据所有的空余部分。

诀窍是使用table-layout: fixed 样式，这样当一列中的内容数量超过预期时，自动布局猜测算法（以及 IE 对它的特别糟糕的解释）不会介入并搞砸.

在固定布局模式下，第一行单元格或<col>元素设置宽度；更多的行不影响宽度。这使得渲染更快；您应该为每个表格使用固定布局。

<table>
    <col class="name" /><col class="data" /><col class="data" /><col class="data" />
    <col class="data" /><col class="data" /><col class="data" /><col class="data" />
    <tr>
        <td>tiddle om pom pom</td>
        <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
    </tr>
</table>

table { width: 100%; table-layout: fixed; }
col.data { width: 2em; }

【讨论】：

【解决方案2】：

<div>
<table width="100%">
<tr>
<td width="100%"></td>  <- this is col 1
<td></td><td></td><td></td><td></td><td></td><td></td><td></td> <- cols 2-8
</tr>
</table>
</div>

通过将第一个单元格设置为 100%，它将强制该单元格尝试尽可能宽，同时仍然尊重其余单元格的宽度。如果单元格 2-8 包含文本，您可以添加，这样这些单元格内的文本就不会因为第一个单元格尝试为 100% 宽度而被换行。

【讨论】：

元素中的 width 属性被 WWW（万维网）联盟视为已过期。
Not supported in HTML5。改用 CSS。

【解决方案3】：

为 2 - 8 设置明确的宽度，单元格 1 将使用剩余空间确定自己的宽度。您也可以为第一个单元格中的空白设置 no-wrap，这样内容就不会换行，而是在必要时强制单元格增长。

【讨论】：

【解决方案4】：

我认为您的问题并不完整，因为从字面上看，答案是根本不设置任何列宽。每一列都会占用尽可能多的空间，并且它们会以某种方式相互分配。

您能说明一下您想要实现的目标吗？

【讨论】：

我知道，如果我根本不设置任何列宽，浏览器会将额外的空间分配到列中。问题是我希望所有这些额外的空间都转到第 1 列。