Comment puis-je définir la largeur des colonnes d'un tableau à l'aide de CSS pour obtenir une disposition spécifique avec des pourcentages différents pour chaque colonne ?

Définition de la largeur des colonnes du tableau

Ce didacticiel fournit des conseils sur la définition de la largeur des colonnes du tableau pour obtenir la disposition souhaitée. Considérons le tableau suivant utilisé comme boîte de réception :

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>

L'objectif est d'allouer 15 % de la largeur de la page aux colonnes "De" et "Date", tout en attribuant 70 % au "Sujet". colonne. De plus, le tableau doit s'étendre sur toute la largeur de la page.

Utilisation de la propriété CSS width

Pour obtenir cette mise en page, la propriété CSS width de l'élément col peut être utilisée . Cette propriété permet de spécifier la largeur de la colonne en pixels ou en pourcentage de la largeur de l'élément parent.

Considérez l'exemple suivant avec des attributs de style en ligne :

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;"></col>
       <col span="1" style="width: 70%;"></col>
       <col span="1" style="width: 15%;"></col>
    </colgroup>

    <thead>
        <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

En spécifiant ces largeurs, le Le tableau occupera toute la largeur de la page et les colonnes seront dimensionnées proportionnellement en fonction des pourcentages spécifiés. Cette approche permet des largeurs de colonnes flexibles, même si la largeur de la page change, garantissant une mise en page cohérente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!