如何为具有不同列数的 2 个 HTML 表格定义单元格宽度？答案

【问题标题】：How to define cell width for 2 HTML tables with different column counts?如何为具有不同列数的 2 个 HTML 表格定义单元格宽度？
【发布时间】：2010-05-18 20:51:26
【问题描述】：

如果我有 2 张桌子：

<table id="Table1">
    <tr>
        <td></td><td></td><td></td>
    </tr>
</table>

<table id="Table2">
    <tr>
        <td></td><td></td><td></td><td></td>
    </tr>
</table>

第一个有 3 列，第二个有 4 列。

当我希望 Table1 的单元格宽度是整个表格宽度的 1/3，而 Table2 的单元格是表格宽度的 1/4 时，如何定义一个样式来表示两个表格？

编辑：为了澄清以下答案之一的评论建议将表格宽度设置为 100%，某些列中的文本将超过自然分割宽度。

【问题讨论】：

标签： html css html-table

【解决方案1】：

到目前为止的答案已经接近，但没有一个完全正确：

#Table1, #Table2 {
    width: 100%;
    table-layout: fixed;
}

仅此而已。

table-layout: fixed 对于列宽不应取决于单元格内容的所有表格都是首选。这比默认的auto 表格布局算法更快、更可靠。

因为这里没有一个列有明确的宽度（无论是来自<col> 元素还是来自<td>s 的第一行，它们都在它们之间平等地共享剩余的 100% 的可用宽度，不管那里有多少是。所以你不必计算 25%s 或 33%s。

【讨论】：

【解决方案2】：

使用一些 CSS：

#Table1 td{
    width: 33%;
}
#Table2 td{
    width: 25%;
}

【讨论】：

【解决方案3】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

    <style type="text/css">
        table 
        {
            table-layout: fixed;
            width: 100%;
        }
    </style>

【讨论】：

【解决方案4】：

尝试使用以下 CSS：

.table1 td {width:33%}
.table2 td {width:25%}

【讨论】：

【解决方案5】：

这个 CSS 应该可以工作

table td{
    width:100%;
}

table{
    table-layout:fixed;
}

【讨论】：