Propriété CSS table-layout

La propriété table-layout spécifie les algorithmes utilisés pour disposer les cellules, lignes et colonnes d'un tableau.

La propriété table-layout spécifie deux algorithmes pour disposer des tableaux: fixed et automatic.

Quand on spécifie la disposition du tableau "automatic", la largeur du tableau est définie par la largeur de ses colonnes.

Quand on spécifie la disposition du tableau "fixed", la disposition du tableau utilise la largeur du tableau, quelque largeur spécifiée des colonnes et les valeurs des bordures et d'espacement des cellules.

Valeur initiale auto
Appliquée Éléments du tableau et du tableau en ligne(inline).
Héritée Non.
Animable Non.
Version CSS2
Syntaxe DOM object.style.tableLayout = "fixed";

Syntaxe

table-layout: auto | fixed | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      th, td {
      border: 2px solid #666;
      }
      table.t1 {
      table-layout: fixed;
      width: 40%;  
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété table-layout </h2>
    <h3>Table-layout: fixed; width: 20%</h3>
    <table class="t1">
      <tr>
        <th>Pays</th>
        <th>Capitale</th>
        <th>Ville</th>
      </tr>
      <tr>
        <td>Russie</td>
        <td>Moscou</td>
        <td>Saint Petersbourg</td>
      </tr>
      <tr>
        <td>Anglais</td>
        <td>Londre</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>Les Pays-Bas</td>
        <td>Amsterdam</td>
        <td>Haage</td>
      </tr>
    </table>
  </body>
</html>

Un exemple dans lequel les algorithmes "auto" et "fixed" sont utilisés:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      th,td {
      border: 2px solid #666;
      }
      table.t1 {
      table-layout: fixed;
      width: 250px;  
      }
      table.t2 {
      table-layout: auto;
      width: 100%;  
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété table-layout</h2>
    <h3>Table-layout: fixed; width: 160px</h3>
    <table class="t1">
      <tr>
        <th>Pays</th>
        <th>Capitale</th>
        <th>Ville</th>
      </tr>
      <tr>
        <td>Russie</td>
        <td>Moscou</td>
        <td>Saint Petersbourg</td>
      </tr>
      <tr>
        <td>Anglais</td>
        <td>Londre</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>Les Pays-Bas</td>
        <td>Amsterdam</td>
        <td>Haage</td>
      </tr>
    </table>
    <h3>Table-layout: auto; width: 100%</h3>
    <table class="t2">
      <tr>
        <th>Pays</th>
        <th>Capitale</th>
        <th>Ville</th>
      </tr>
      <tr>
        <td>Russie</td>
        <td>Moscou</td>
        <td>Saint Petersbourg</td>
      </tr>
      <tr>
        <td>Anglais</td>
        <td>Londre</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>Les Pays-Bas</td>
        <td>Amsterdam</td>
        <td>Hague</td>
      </tr>
    </table>
  </body>
</html>

Valeurs

Valeur Description
auto Utilise un algorithme deautomatique quand le tableau et ses cellules dépendent de leur contenu. C'est la valeur initiale de cette propriété.
fixed Utilise un algorithme fixe. Les largeurs du tableau, colonnes et la première ligne des cellules définissent le tableau et les largeurs des colonnes.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

14.0+ 12.0+ 1.0+ 1.0+ 7.0+


Trouvez-vous cela utile?

Articles Associées