Configuración del ancho de columna proporcional con < col width = & # 8220; x * & # 8221; / >

Question

Estoy tratando de establecer el ancho de columna proporcional con < 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>

A pesar de establecer proporciones en la etiqueta < col > , los anchos de columna son iguales. ¿Qué hago mal?

Answer 1

podría usar 17%, 34% y 49%. para 1: 2: 3

Answer 2

Intenté hacer que esto funcionara en todos los principales navegadores, pero también fallé. Google saca muy poco, excepto las especificaciones oficiales.

Concluyo que el ancho de columna proporcional simplemente no es compatible con ninguno de los fabricantes de navegadores. Muy extraño, ya que parecería muy útil en comparación con algunas de las cosas más esotéricas que se admiten hoy en día.

Answer 3

Puede usar colgroup .

De WSSchools

  

La etiqueta especifica un grupo de una o más columnas en una tabla   para formatear.

     

La etiqueta es útil para aplicar estilos a columnas enteras,   en lugar de repetir los estilos para cada celda, para cada fila.

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>