web-dev-qa-db-fra.com

Réglage de la largeur de la colonne de la table

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 représente 70%. Je veux aussi que le tableau prenne toute la largeur de la page.

htmlcsshtml-table
180
alamodey
<table style="width: 100%">
    <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! -->
    <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>
280
Gordon Gustafson

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 éviter les doubles emplois et la séparation des problèmes (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 attribuer à votre tableau une largeur spécifique (par exemple, 900 pixels). Ce navigateur a des problèmes pour rendre un élément avec des cotes en pourcentage si son enveloppe n'a pas de cotes exactes.

119
Ron DeVera

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

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

Autre manière 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 sélecteur nth-child() de CSS3 (IE9 +), où vous venez de placer le n °. de la colonne respective dans la parenthèse au lieu de les lier avec le sélecteur adjacent. Comme ceci, 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>
12
DanMan

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 automatiquement définies à 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>

  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>

    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>

    c) Celui-ci est mon préféré. Identique à b) mais avec un meilleur support 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>
6
tomasz86

En fonction de votre corps (ou de la div qui enveloppe votre table), vous devriez être capable de 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

5
Boris Guéry
<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

4
Srinivas Erukulla

N'utilisez pas l'attribut border, utilisez CSS pour tous vos besoins en matière 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>

Cependant, incorporer CSS comme cela est une mauvaise pratique - on devrait plutôt utiliser des classes CSS et placer les règles CSS dans un fichier CSS externe.

3
Etienne Perot

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>
3
Milan

Voici un autre moyen minimal de le faire dans CSS qui fonctionne même dans les navigateurs plus anciens qui ne supportent pas :nth-child et 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%;
}
2
DRD
    table { table-layout: fixed; }
    .subject { width: 70%; }
    <table>
      <tr>
        <th>From</th>
        <th class="subject">Subject</th>
        <th>Date</th>
      </tr>
    </table>
2
Hector David

Ajoutez colgroup après votre balise de table. Définissez la largeur et le nombre de colonnes ici. et ajouter une balise tbody. Mets ton tr dans le 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>
1
Abdus Salam Azad