Impostazione della larghezza proporzionale della colonna con < col width = & # 8220; x * & # 8221; / & Gt;

Question

Sto cercando di impostare la larghezza proporzionale della colonna con < col width = " x * " / & Gt; :

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

Nonostante l'impostazione delle proporzioni nel tag < col > , le larghezze delle colonne sono uguali. Cosa faccio di sbagliato?

Answer 1

potresti usare il 17%, il 34% e il 49%. per 1: 2: 3

Answer 2

Ho provato a farlo funzionare in tutti i principali browser, ma ho anche fallito. Google riporta molto poco tranne le specifiche ufficiali.

Concludo che la larghezza della colonna proporzionale semplicemente non è supportata da nessuno dei produttori di browser. Molto strano, poiché sembrerebbe molto utile rispetto ad alcune delle cose più esoteriche che sono supportate al giorno d'oggi.

Answer 3

Puoi usare colgroup .

Da WSSchools

  

Il tag specifica un gruppo di una o più colonne in una tabella   per la formattazione.

     

Il tag è utile per applicare gli stili a intere colonne,   invece di ripetere gli stili per ogni cella, per ogni riga.

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>