Réglage de largeur de colonne de table

Question

J’ai une table simple qui est utilisée pour une boîte de réception comme suit :

Comment définir la largeur donc le From et la Date sont 15 % de la largeur de la page et l’objet est de 70 %. Je tiens également à la table pour prendre la largeur de la page entière.

Answer 1

<table>
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    <!-- Put <thead>, <tbody>, and <tr>'s here! -->
</table>

Answer 2

HTML:

<table>
  <thead>
    <tr>
      <th class="from">From</th>
      <th class="subject">Subject</th>
      <th class="date">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[from]</td>
      <td>[subject]</td>
      <td>[date]</td>
    </tr>
  </tbody>
</table>

CSS:

table {
  width: 100%;
  border: 1px solid #000;
}
th.from, th.date {
  width: 15%
}
th.subject {
  width: 70%; /* Not necessary, since only 70% width remains */
}

La meilleure pratique est de garder votre code HTML et CSS séparé pour les moins de duplication de code, et pour la séparation des préoccupations (HTML pour la structure et la sémantique, et CSS pour la présentation).

Notez que, pour que cela fonctionne dans les anciennes versions d'Internet Explorer, vous pouvez avoir à donner à votre table une largeur spécifique (par exemple, 900px). Ce navigateur a quelques problèmes de rendu d'un élément avec un pourcentage dimensions si l'emballage n'a pas les dimensions exactes.

Answer 3

Utilisation du CSS ci-dessous, la première déclaration assurera votre table s’en tient à la largeur que vous fournissez (vous devrez ajouter les classes dans votre code HTML) :

Answer 4

Autre façon avec juste une classe CSS, qui fonctionne même dans IE7 :

Plus récemment, vous pouvez également utiliser le `` Sélecteur de CSS3 (IE9 +), où vous aviez juste mis le nr. de la colonne respective dans la parenthèse au lieu de les enfiler avec le sélecteur adjacent. Comme ça, par exemple :

Answer 5

Selon votre corps (ou de la balise div qui est envelopper votre table) « paramètres », vous devriez être capable de faire cela :

Démo