Comment contrôler avec précision la largeur des colonnes dans les structures de tableaux HTML à l'aide de CSS ?

Définition de la largeur des colonnes dans les structures de tableau

Dans divers scénarios de développement Web, il devient nécessaire de contrôler avec précision la largeur des colonnes du tableau pour une présentation optimale. Considérons le simple tableau HTML suivant utilisé comme boîte de réception :

<code class="html"><table border="1">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table></code>

Notre objectif est de définir la largeur des colonnes De et Date à 15 % de la largeur de la page, tandis que la colonne Objet occupe les 70 % restants. %. De plus, nous voulons que le tableau lui-même s'étende sur toute la largeur de la page.

Pour résoudre ce problème, nous pouvons utiliser la propriété CSS width dans l'élément col. Cette propriété nous permet de spécifier la largeur des colonnes individuelles en utilisant différentes unités, notamment des pixels ou des pourcentages.

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

    <!-- Table body and rows -->
</table></code>

Dans cet exemple, nous créons un ensemble de trois éléments col dans un conteneur colgroup. Chaque élément col représente une colonne de tableau et se voit attribuer la largeur souhaitée à l'aide de styles CSS en ligne. En spécifiant des pourcentages, les largeurs de colonnes s'adaptent proportionnellement à la largeur globale du tableau.

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!