Définition de la largeur de colonne du tableau


204

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.

Réponses:


318

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


5
Comme la propreté de cette solution. Cependant, veuillez fermer le col, par exemple <col span = "1" style = "width: 15%;" /> ou <col span = "1" style = "width: 15%;"> </col>
lsu_guy

23
@Isu_guy vous ne fermez <col> que lorsque vous utilisez XHTML - en HTML, la balise <col> n'a pas de fermeture ... voir le lien pour plus d'informations. En HTML5, <col> est un élément vide, ce qui signifie qu'il NE DOIT PAS être fermé
Matija Nalis

4
@Zulu selon w3schools.com/tags/att_col_width.asp "L'attribut de largeur <col> n'est pas pris en charge en HTML5."
Caltor

30
@Caltor: le code n'utilise pas le <col> width attribute; il utilise a CSS *style* width, ce qui a remplacé l'attribut width <col>. (malgré les multiples votes positifs de ce commentaire !!)
ToolmakerSteve

4
span="1"est superflu puisque 1 est la valeur par défaut.
Madbreaks

128

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.


cette solution échoue si vous avez des colspans dans la première rangée
mark1234

3
Bien parce que <col width = ""> est obsolète dans HTML5: developer.mozilla.org/en/docs/Web/HTML/Element/col
Richard

30

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%;
}

En fait, il vous suffit de spécifier la largeur des deux colonnes. Le troisième sera calculé automatiquement, cela table{table-layout:fixed};.from,.date{width:15%}suffit donc. À moins que les classes ne soient également utilisées sur d'autres éléments, l'écriture th.fromest redondante et peut être réduite à juste .from.
tomasz86

14

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>

La :nth-childsolution proposée est horrible en termes de performances. Il n'y a aucune raison valable de l'utiliser (en particulier avec le sélecteur universel) dans cet exemple où il n'y a que trois éléments ( thou col) à styliser. De plus, il vous suffit de définir la largeur sur thla première ligne. Le .mytable tdpremier exemple est redondant.
tomasz86

"La solution proposée: le nième enfant est horrible en termes de performances." - citation requise.
DanMan

Cela devrait suffire: rendre efficacement CSS . Avec votre utilisation du sélecteur universel, le navigateur vérifiera d'abord TOUS les éléments s'ils sont le nième enfant d'un autre élément, puis si leur parent direct l'est tret ensuite s'ils appartiennent à .mytable. Si vous voulez vraiment utiliser « nième » alors quelque chose comme ceci sera probablement beaucoup mieux: .mytable th:nth-of-type(1) {width: 15%}; .mytable th:nth-of-type(2) {width: 70%};. Il n'est également pas nécessaire de spécifier la troisième largeur de colonne dans ce cas.
tomasz86

Personnellement, j'utiliserais des cours ou tout simplement .mytable th+th{width: 70%}.mytable th+th+th{width:15%}. Les "nième" sélecteurs eux-mêmes peuvent être très utiles mais dans ce cas particulier (un petit tableau avec seulement 3 colonnes) ne sont pas vraiment nécessaires. Lors de l' utilisation , table-layout: fixedvous pouvez même faire ceci: table{table-layout:fixed}th:first-child+th{width:70%}.
tomasz86

Je suis au courant de ça. Mais ces articles remontent à des années et il y a de plus gros problèmes aujourd'hui que les sélecteurs CSS, comme d'énormes quantités d'images et de code JS.
DanMan

8

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>

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


5

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


5

    table { table-layout: fixed; }
    .subject { width: 70%; }
    <table>
      <tr>
        <th>From</th>
        <th class="subject">Subject</th>
        <th>Date</th>
      </tr>
    </table>


4
<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


8
L'attribut col width n'est pas pris en charge en HTML5.
Rune du

4

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

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.


1
Je soupçonne que l'exemple de code que l'OP et les stackoverflowians utiles ont publié était pour la lisibilité et la simplicité, en aucun cas un encouragement pour les styles en ligne.
Tass

2

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%;
}

2

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>

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

Salut - bienvenue dans Stack Overflow. En général, les réponses avec du texte (au lieu de simplement du code) et certaines explications sont considérées comme meilleures que les réponses uniquement avec du code. Étant donné que cette question est plus ancienne et contient de nombreuses autres réponses, elles peuvent vous guider dans vos réponses futures.
jwheron
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.