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

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

将显式宽度设置为 2 - 8，单元格 1 将根据剩余空间确定其自己的宽度。您还可以为第一个单元格中的空白设置不换行，这样内容就不会换行，但在必要时强制单元格增长。