Définition de la largeur de colonne proportionnelle avec < col largeur = “x *” / >

StackOverflow https://stackoverflow.com/questions/1822680

  •  10-07-2019
  •  | 
  •  

Question

J'essaie de définir une largeur de colonne proportionnelle avec < col width = & x; 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>

Malgré la définition des proportions dans la balise < col > , les largeurs de colonne sont égales. Qu'est-ce que je fais mal?

Était-ce utile?

La solution

vous pourriez utiliser 17%, 34% et 49%. pour 1: 2: 3

Autres conseils

J'ai essayé de faire en sorte que cela fonctionne dans tous les principaux navigateurs, mais j'ai également échoué. Google n'apporte que très peu de choses sauf la spécification officielle

Je conclus que la largeur de colonne proportionnelle n’est tout simplement pas prise en charge par les fabricants de navigateur. Très étrange, car cela semblerait très utile comparé à certains des trucs plus ésotériques supportés de nos jours.

Vous pouvez utiliser colgroup .

De WSSchools

  

La balise spécifie un groupe d'une ou plusieurs colonnes dans une table   pour le formatage.

     

La balise est utile pour appliquer des styles à des colonnes entières.   au lieu de répéter les styles pour chaque cellule, pour chaque ligne. 

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>

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top