Maison  >  Article  >  interface Web  >  Comment définir la largeur des colonnes dans un tableau pour une mise en page de style boîte de réception ?

Comment définir la largeur des colonnes dans un tableau pour une mise en page de style boîte de réception ?

DDD
DDDoriginal
2024-10-30 01:54:02227parcourir

How to Set Column Widths in a Table for an Inbox-Style Layout?

Définition de la largeur des colonnes du tableau

Créer un tableau visuellement attrayant et fonctionnel implique souvent de personnaliser la largeur de ses colonnes. Dans le cas d'un tableau de base de style boîte de réception, l'objectif est de définir des largeurs spécifiques pour les colonnes « De », « Objet » et « Date », en veillant à ce qu'elles occupent différents pourcentages de la largeur de la page.

Pour réaliser cette personnalisation, la propriété width CSS est utilisée en conjonction avec l'élément col. Cet élément réside dans l'élément colgroup, qui définit la disposition des colonnes. En attribuant une valeur de largeur à chaque colonne, nous pouvons contrôler sa taille.

Voici un exemple utilisant des attributs CSS en ligne :

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    <!-- Column headers (<thead>) and body rows (<tbody>) go here -->
    <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>

Cet extrait de code définit le tableau pour qu'il occupe toute la largeur de la page. , tout en définissant trois colonnes avec des pourcentages précis :

  • "De" : 15% de la largeur de la page
  • "Sujet" : 70% de la largeur de la page
  • "Date" : 15% de la largeur de la page

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn