使用>

Question

我正在尝试使用 设置比例列宽度：

<table width="600px">
    <col width="1*" />
    <col width="2*" />
    <col width="3*" />
    <tbody>
        <tr>
            <td style="border: 1px solid black;">AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA AAA
            </td>
            <td style="border: 1px solid black;">BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB
            </td>
            <td style="border: 1px solid black;">CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC
            </td>
        </tr>
    </tbody>
</table>

尽管在 标记中设置比例，但列宽度相等。我做错了什么？

Answer 1

您可以使用 17%、34% 和 49%。 1:2:3

Answer 2

我试图让它在所有主要浏览器中工作，但也失败了。除了官方规范之外，谷歌几乎没有透露什么。

我的结论是，任何浏览器制造商都不支持比例列宽。非常奇怪，因为与当今支持的一些更深奥的东西相比，它看起来非常有用。

Answer 3

您可以使用colgroup。

来自WSSchools

该标签指定表中一组或多列的列
用于格式化。

该标签对于将样式应用于整个列非常有用，
而不是为每行的每个单元格重复样式。

table {
   width: 100%;
}
td {
   text-align: center;
}

    <table>
        <colgroup>
            <col span="1" style="width: 15%;">
            <col span="1" style="width: 15%;">
            <col span="1" style="width: 70%;">
        </colgroup>
        <thead>
            <tr>
                <th class="col_3">On stop credit</th>
                <th class="col_3">Rating</th>
                <th class="col_3">Customer Notes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Value</td>
                <td>Value</td>
                <td>Long text value</td>
            </tr>
        </tbody>
    </table>