/ Code Css table-layout | Résultat du code Css table-layout | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code de la propriété CSS table-layout.

<style>
.table-layout-normal,.table-layout-fixed{ overflow-x : auto; max-width : 80% }

.table-layout-fixed td,.table-layout-fixed th{ border : 1px solid green }
.table-layout-normal td,.table-layout-normal th{ border : 1px solid #000 }

.table-layout-normal table {
   : auto; 
}
.table-layout-fixed table {
   : fixed; 
}
.exemple-2 .table-layout-normal table, .exemple-2 .table-layout-fixed table,
.exemple-1 .table-layout-normal table, .exemple-1 .table-layout-fixed table {
   : 100%; 
}
.exemple-2 .table-layout-normal .wth, .exemple-2 .table-layout-fixed .wth {
  width : 7.6%; 
}

.table-layout-normal .wth,.table-layout-normal .wtd,
.table-layout-fixed .wth,.table-layout-fixed .wtd {
   : 105px ; 
}
.table-layout-normal .wth,.table-layout-normal .wtd,
.table-layout-fixed .wth,.table-layout-fixed .wtd {
   : 120px ; 
}

.table-layout-normal,.table-layout-fixed,
.exemple-0,.exemple-1{ margin-bottom : 20px; } 
 
</style>
<b>Jouer sur la largeur de la fenêtre du navigateur</b>
<div class="exemple-0">
<div class="table-layout-normal">
Tableau "table-layout : auto", sans taille
    <table>
      <tr>
        <th class="wth firstwth">Colonne 1</th>
        <th class="wth">Colonne 2</th>
        <th class="wth">Colonne 3</th>
        <th class="wth">Colonne 4</th>
        <th class="wth">Colonne 5</th> 
      </tr>
      <tr>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td> 
        <td class="wtd">Etenim si attendere diligenter, existimare vere de omni hac causa volueritis.</td>
        <td class="wtd">Contenu</td> 
      </tr>
    </table>
  </div>
  <div class="table-layout-fixed">
Tableau "table-layout : fixed", sans taille
    <table>
      <tr>
        <th class="wth firstwth">Colonne 1</th>
        <th class="wth">Colonne 2</th>
        <th class="wth">Colonne 3</th>
        <th class="wth">Colonne 4</th>
        <th class="wth">Colonne 5</th> 
      </tr>
      <tr>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td> 
        <td class="wtd">Etenim si attendere diligenter, existimare vere de omni hac causa volueritis.</td>
        <td class="wtd">Contenu</td> 
      </tr>
    </table>
  </div>
<div class="table-layout-normal">
Tableau "table-layout : auto", sans taille
    <table>
      <tr>
        <th class="wth firstwth">Colonne 1</th>
        <th class="wth">Colonne 2</th>
        <th class="wth">Colonne 3</th>
        <th class="wth">Colonne 4</th>
        <th class="wth">Colonne 5</th>
        <th class="wth">Colonne 6</th>
        <th class="wth">Colonne 7</th>
        <th class="wth">Colonne 8</th>
        <th class="wth">Colonne 9</th>
        <th class="wth">Colonne 10</th>
        <th class="wth">Colonne 11</th>
        <th class="wth">Colonne 12</th>
      </tr>
      <tr>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Etenim si attendere diligenter, existimare vere de omni hac causa volueritis.</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
      </tr>
    </table>
  </div>
  <div class="table-layout-fixed">
Tableau "table-layout : fixed", sans taille
    <table>
      <tr>
        <th class="wth firstwth">Colonne 1</th>
        <th class="wth">Colonne 2</th>
        <th class="wth">Colonne 3</th>
        <th class="wth">Colonne 4</th>
        <th class="wth">Colonne 5</th>
        <th class="wth">Colonne 6</th>
        <th class="wth">Colonne 7</th>
        <th class="wth">Colonne 8</th>
        <th class="wth">Colonne 9</th>
        <th class="wth">Colonne 10</th>
        <th class="wth">Colonne 11</th>
        <th class="wth">Colonne 12</th>
      </tr>
      <tr>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Etenim si attendere diligenter, existimare vere de omni hac causa volueritis.</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
      </tr>
    </table>
  </div>
</div>
<div class="exemple-1">
<div class="table-layout-normal">
Tableau "table-layout : auto", taille 100%
    <table>
      <tr>
        <th class="wth firstwth">Colonne 1</th>
        <th class="wth">Colonne 2</th>
        <th class="wth">Colonne 3</th>
        <th class="wth">Colonne 4</th>
        <th class="wth">Colonne 5</th> 
      </tr>
      <tr>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td> 
        <td class="wtd">Etenim si attendere diligenter, existimare vere de omni hac causa volueritis.</td>
        <td class="wtd">Contenu</td> 
      </tr>
    </table>
  </div>
  <div class="table-layout-fixed">
Tableau "table-layout : fixed", taille 100%
    <table>
      <tr>
        <th class="wth firstwth">Colonne 1</th>
        <th class="wth">Colonne 2</th>
        <th class="wth">Colonne 3</th>
        <th class="wth">Colonne 4</th>
        <th class="wth">Colonne 5</th> 
      </tr>
      <tr>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td> 
        <td class="wtd">Etenim si attendere diligenter, existimare vere de omni hac causa volueritis.</td>
        <td class="wtd">Contenu</td> 
      </tr>
    </table>
  </div>
<div class="table-layout-normal">
Tableau "table-layout : auto", taille 100%
    <table>
      <tr>
        <th class="wth firstwth">Colonne 1</th>
        <th class="wth">Colonne 2</th>
        <th class="wth">Colonne 3</th>
        <th class="wth">Colonne 4</th>
        <th class="wth">Colonne 5</th>
        <th class="wth">Colonne 6</th>
        <th class="wth">Colonne 7</th>
        <th class="wth">Colonne 8</th>
        <th class="wth">Colonne 9</th>
        <th class="wth">Colonne 10</th>
        <th class="wth">Colonne 11</th>
        <th class="wth">Colonne 12</th>
      </tr>
      <tr>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Etenim si attendere diligenter, existimare vere de omni hac causa volueritis.</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
      </tr>
    </table>
  </div>
  <div class="table-layout-fixed">
Tableau "table-layout : fixed", taille 100%
    <table>
      <tr>
        <th class="wth firstwth">Colonne 1</th>
        <th class="wth">Colonne 2</th>
        <th class="wth">Colonne 3</th>
        <th class="wth">Colonne 4</th>
        <th class="wth">Colonne 5</th>
        <th class="wth">Colonne 6</th>
        <th class="wth">Colonne 7</th>
        <th class="wth">Colonne 8</th>
        <th class="wth">Colonne 9</th>
        <th class="wth">Colonne 10</th>
        <th class="wth">Colonne 11</th>
        <th class="wth">Colonne 12</th>
      </tr>
      <tr>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Etenim si attendere diligenter, existimare vere de omni hac causa volueritis.</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
      </tr>
    </table>
  </div>
</div>
<div class="exemple-2">
<div class="table-layout-normal">
Tableau "table-layout : auto", taille 100%
    <table>
      <tr>
        <th class="wth firstwth">Colonne 1</th>
        <th class="wth">Colonne 2</th>
        <th class="wth">Colonne 3</th>
        <th class="wth">Colonne 4</th>
        <th class="wth">Colonne 5</th> 
      </tr>
      <tr>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td> 
        <td class="wtd">Etenim si attendere diligenter, existimare vere de omni hac causa volueritis.</td>
        <td class="wtd">Contenu</td> 
      </tr>
    </table>
  </div>
  <div class="table-layout-fixed">
Tableau "table-layout : fixed", taille 100%
    <table>
      <tr>
        <th class="wth firstwth">Colonne 1</th>
        <th class="wth">Colonne 2</th>
        <th class="wth">Colonne 3</th>
        <th class="wth">Colonne 4</th>
        <th class="wth">Colonne 5</th> 
      </tr>
      <tr>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td> 
        <td class="wtd">Etenim si attendere diligenter, existimare vere de omni hac causa volueritis.</td>
        <td class="wtd">Contenu</td> 
      </tr>
    </table>
  </div>
<div class="table-layout-normal">
Tableau "table-layout : auto", taille 100%
    <table>
      <tr>
        <th class="wth firstwth">Colonne 1</th>
        <th class="wth">Colonne 2</th>
        <th class="wth">Colonne 3</th>
        <th class="wth">Colonne 4</th>
        <th class="wth">Colonne 5</th>
        <th class="wth">Colonne 6</th>
        <th class="wth">Colonne 7</th>
        <th class="wth">Colonne 8</th>
        <th class="wth">Colonne 9</th>
        <th class="wth">Colonne 10</th>
        <th class="wth">Colonne 11</th>
        <th class="wth">Colonne 12</th>
      </tr>
      <tr>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Etenim si attendere diligenter, existimare vere de omni hac causa volueritis.</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
      </tr>
    </table>
  </div>
  <div class="table-layout-fixed">
Tableau "table-layout : fixed", taille 100%
    <table>
      <tr>
        <th class="wth firstwth">Colonne 1</th>
        <th class="wth">Colonne 2</th>
        <th class="wth">Colonne 3</th>
        <th class="wth">Colonne 4</th>
        <th class="wth">Colonne 5</th>
        <th class="wth">Colonne 6</th>
        <th class="wth">Colonne 7</th>
        <th class="wth">Colonne 8</th>
        <th class="wth">Colonne 9</th>
        <th class="wth">Colonne 10</th>
        <th class="wth">Colonne 11</th>
        <th class="wth">Colonne 12</th>
      </tr>
      <tr>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Etenim si attendere diligenter, existimare vere de omni hac causa volueritis.</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
        <td class="wtd">Contenu</td>
      </tr>
    </table>
  </div>
</div>

Interprétation du code de la propriété table-layout CSS par votre navigateur.

Jouer sur la largeur de la fenêtre du navigateur
Tableau "table-layout : auto", sans taille
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5
Contenu Contenu Contenu Etenim si attendere diligenter, existimare vere de omni hac causa volueritis. Contenu
Tableau "table-layout : fixed", sans taille
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5
Contenu Contenu Contenu Etenim si attendere diligenter, existimare vere de omni hac causa volueritis. Contenu
Tableau "table-layout : auto", sans taille
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5 Colonne 6 Colonne 7 Colonne 8 Colonne 9 Colonne 10 Colonne 11 Colonne 12
Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Etenim si attendere diligenter, existimare vere de omni hac causa volueritis. Contenu Contenu Contenu
Tableau "table-layout : fixed", sans taille
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5 Colonne 6 Colonne 7 Colonne 8 Colonne 9 Colonne 10 Colonne 11 Colonne 12
Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Etenim si attendere diligenter, existimare vere de omni hac causa volueritis. Contenu Contenu Contenu
Tableau "table-layout : auto", taille 100%
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5
Contenu Contenu Contenu Etenim si attendere diligenter, existimare vere de omni hac causa volueritis. Contenu
Tableau "table-layout : fixed", taille 100%
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5
Contenu Contenu Contenu Etenim si attendere diligenter, existimare vere de omni hac causa volueritis. Contenu
Tableau "table-layout : auto", taille 100%
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5 Colonne 6 Colonne 7 Colonne 8 Colonne 9 Colonne 10 Colonne 11 Colonne 12
Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Etenim si attendere diligenter, existimare vere de omni hac causa volueritis. Contenu Contenu Contenu
Tableau "table-layout : fixed", taille 100%
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5 Colonne 6 Colonne 7 Colonne 8 Colonne 9 Colonne 10 Colonne 11 Colonne 12
Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Etenim si attendere diligenter, existimare vere de omni hac causa volueritis. Contenu Contenu Contenu
Tableau "table-layout : auto", taille 100%
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5
Contenu Contenu Contenu Etenim si attendere diligenter, existimare vere de omni hac causa volueritis. Contenu
Tableau "table-layout : fixed", taille 100%
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5
Contenu Contenu Contenu Etenim si attendere diligenter, existimare vere de omni hac causa volueritis. Contenu
Tableau "table-layout : auto", taille 100%
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5 Colonne 6 Colonne 7 Colonne 8 Colonne 9 Colonne 10 Colonne 11 Colonne 12
Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Etenim si attendere diligenter, existimare vere de omni hac causa volueritis. Contenu Contenu Contenu
Tableau "table-layout : fixed", taille 100%
Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5 Colonne 6 Colonne 7 Colonne 8 Colonne 9 Colonne 10 Colonne 11 Colonne 12
Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Etenim si attendere diligenter, existimare vere de omni hac causa volueritis. Contenu Contenu Contenu

Interprétation normale du code de la propriété CSS table-layout (copie d'écran).

copie d'écran de l'affichage de la propriété CSS table-layout