table-layout CSS exemple de code | ZONE CSS Exemple d'écriture de la propriété CSS table-layout, code CSS détaillé avec toutes les valeurs de la CSS table-layout. Copie d'écran de l'interprétation de la propriété table-layout CSS pour comparer avec l'interprétation CSS votre navigateur. Définition de la propriété CSS table-layout. 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 {
table-layout : auto;
}
.table-layout-fixed table {
table-layout : 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 {
width : 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 {
min-width : 105px ;
}
.table-layout-normal .wth,.table-layout-normal .wtd,
.table-layout-fixed .wth,.table-layout-fixed .wtd {
max-width : 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> Agrandir la zone de code HTML
Voir de code table-layout dans :
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).
Aller en haut de la page
Vos paramètres de cookies Ce site utilise des cookies pour améliorer votre expérience utilisateur et optimiser le fonctionnement du site.
Vous pouvez accepter ces cookies en cliquant sur « Autoriser tous les cookies », cliquer sur « Paramétrer les cookies » pour gérer vos préférences de cookies.
