Setting proportional column width with <col width=“x*” />

Question

I am trying to set proportional column width with <col width="x*" />:

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

Despite setting proportions in <col> tag, column widths are equal. What do I do wrong?

Answer 1

you could use 17%, 34%, and 49%. for 1:2:3

Answer 2

I tried to get this to work in all the major browsers but have also failed. Google brings up very little except the official spec.

I conclude that proportional column width simply isn't supported by any of the browser makers. Very odd, since it would seem very useful compared to some of the more esoteric stuff that is supported nowadays.

Answer 3

You can use colgroup.

From WSSchools

The tag specifies a group of one or more columns in a table for formatting.

The tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

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>