Question

如果我有两张桌子：

<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％后澄清，某些列中的文字将超出自然分割宽度。

Answer 1

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

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

就是这样。

对于列宽不应取决于单元格内容的所有表，

table-layout: fixed是首选。这比默认的auto表格布局算法更快，更可靠。

因为这里没有任何列具有明确的宽度（来自<col>元素或来自<td>的第一行，所以它们在它们之间均可共享剩余的100％可用宽度但是有很多。所以你不必计算25％s或33％s。

Answer 2

尝试使用以下CSS：

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

Answer 3

使用一些CSS：

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

Answer 4

这个CSS应该可以工作

table td{
    width:100%;
}

table{
    table-layout:fixed;
}

Answer 5

<!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>

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

5 个答案: