Configuração da largura da coluna proporcional com

Question

Estou tentando definir a largura da coluna proporcional com <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>

Apesar de definir proporções em <col> Tag, as larguras da coluna são iguais. O que eu faço de errado?

Answer 1

Você pode usar 17%, 34%e 49%. para 1: 2: 3

Answer 2

Tentei fazer isso funcionar em todos os principais navegadores, mas também falhei. O Google traz muito pouco, exceto as especificações oficiais.

Concluo que a largura da coluna proporcional simplesmente não é suportada por nenhum dos fabricantes de navegadores. Muito estranho, pois parece muito útil em comparação com algumas das coisas mais esotéricas que são suportadas hoje em dia.

Answer 3

Você pode usar colgroup.

A partir de WSschools

A tag especifica um grupo de uma ou mais colunas em uma tabela para formatação.

A tag é útil para aplicar estilos em colunas inteiras, em vez de repetir os estilos para cada célula, para cada linha.

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>