Définition de la largeur de colonne du tableau

J'ai un tableau simple qui est utilisé pour une boîte de réception comme suit:

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

Comment définir la largeur de sorte que le début et la date représentent 15% de la largeur de la page et que le sujet soit 70%. Je veux également que le tableau occupe toute la largeur de la page.

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 consiste à garder votre HTML et CSS séparés pour 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 devrez peut-être donner à votre table une largeur spécifique (par exemple, 900 px). Ce navigateur a quelques problèmes pour rendre un élément avec des dimensions en pourcentage si son wrapper n'a pas de dimensions exactes.

Utilisez le CSS ci-dessous, la première déclaration garantira que votre table respecte les largeurs que vous fournissez (vous devrez ajouter les classes dans votre HTML):

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}

Autre moyen avec une seule classe tout en conservant vos styles dans un fichier CSS, qui fonctionne même dans IE7:

<table class="mytable">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>
<style>
    .mytable td, .mytable th { width:15%; }
    .mytable td + td, .mytable th + th { width:70%; }
    .mytable td + td + td, .mytable th + th + th { width:15%; }
</style>

Plus récemment, vous pouvez également utiliser le nth-child()sélecteur de CSS3 (IE9 +), où vous venez de mettre le nr. de la colonne respective entre parenthèses au lieu de les enchaîner avec le sélecteur adjacent. Comme ça, par exemple:

<style>
    .mytable tr > *:nth-child(1) { width:15%; }
    .mytable tr > *:nth-child(2) { width:70%; }
    .mytable tr > *:nth-child(3) { width:15%; }
</style>

Ce sont mes deux suggestions.

1. Utilisation des classes. Il n'est pas nécessaire de spécifier la largeur des deux autres colonnes car elles seront définies automatiquement à 15% par le navigateur.

       table { table-layout: fixed; }
       .subject { width: 70%; }

       <table>
         <tr>
           <th>From</th>
           <th class="subject">Subject</th>
           <th>Date</th>
         </tr>
       </table>

   Exécuter l'extrait de codeMasquer les résultats

   Développer l'extrait

2. Sans utiliser de cours. Trois méthodes différentes mais le résultat est identique.

   une)

       table { table-layout: fixed; }
       th+th { width: 70%; }
       th+th+th { width: 15%; }

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

   Exécuter l'extrait de codeMasquer les résultats

   Développer l'extrait

   b)

       table { table-layout: fixed; }
       th:nth-of-type(2) { width: 70%; }

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

   Exécuter l'extrait de codeMasquer les résultats

   Développer l'extrait

   c) Celui-ci est mon préféré. Identique à b) mais avec une meilleure prise en charge du navigateur.

       table { table-layout: fixed; }
       th:first-child+th { width: 70%; }

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

   Exécuter l'extrait de codeMasquer les résultats

   Développer l'extrait

En fonction de votre corps (ou de la div qui enveloppe votre table) les "paramètres", vous devriez pouvoir faire ceci:

body {
  width: 98%;
}

table {
  width: 100%;
}


th {
  border: 1px solid black;
}


th.From, th.Date {
  width: 15%;
}

th.Date {
  width: 70%;
}


<table>
  <thead>
    <tr>
      <th class="From">From</th>
      <th class="Subject">Subject</th>
      <th class="Date">Date</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>Me</td>
       <td>Your question</td>
       <td>5/30/2009 2:41:40 AM UTC</td>
     </tr>
   </tbody>
</table>

Démo

<table>
  <col width="130">
  <col width="80">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Démo

Essayez ceci à la place.

<table style="width: 100%">
    <tr>
        <th style="width: 20%">
           column 1
        </th>
        <th style="width: 40%">
           column 2
        </th>
        <th style="width: 40%">
           column 3
        </th>
    </tr>
    <tr>
        <td style="width: 20%">
           value 1
        </td>
        <td style="width: 40%">
           value 2
        </td>
        <td style="width: 40%">
           value 3
        </td>
    </tr>
</table>

N'utilisez pas l'attribut border, utilisez CSS pour tous vos besoins de style.

<table style="border:1px; width:100%;">
    <tr>
            <th style="width:15%;">From</th>
            <th style="width:70%;">Subject</th>
            <th style="width:15%;">Date</th>
    </tr>
... rest of the table code...
</table>

Mais l'incorporation de CSS comme ça est une mauvaise pratique - il faut utiliser des classes CSS à la place et mettre les règles CSS dans un fichier CSS externe.

Voici une autre façon minimale de le faire en CSS qui fonctionne même dans les anciens navigateurs qui ne prennent pas en charge :nth-childet les sélecteurs similaires: http://jsfiddle.net/3wZWt/ .

HTML:

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>Dmitriy</td>
        <td>Learning CSS</td>
        <td>7/5/2014</td>
    </tr>
</table>

CSS:

table {
    border-collapse: collapse;
    width: 100%;
}

tr > * {
    border: 1px solid #000;
}

tr > th + th {
    width: 70%;
}

tr > th + th + th {
    width: 15%;
}

Ajoutez colgroup après votre balise de table. Définissez ici la largeur et le nombre de colonnes. et ajoutez la balise tbody. Mettez votre tr à l'intérieur du corps.

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


    <tbody>
        <tr>
            <td>First column</td>
            <td>Second column</td>
        </tr>
    </tbody>
</table>

style="column-width:300px;white-space: normal;"