Question

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

Answer 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; }

Answer 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％宽度，这些单元格内的文本不会被包装。

Answer 3

将显式宽度设置为2 - 8，单元格1将使用剩余空间确定自己的宽度。您也可以为第一个单元格中的空白设置无包装，以便内容不会换行，但在必要时强制单元格增长。

Answer 4

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

你能澄清一下你想要达到的目标吗？

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

4 个答案: