table-layout

  • Raccourci de la révision : CSS/table-layout
  • Titre de la révision : table-layout
  • ID de la révision : 449033
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS table-layout définit l'algorithme utilisé pour disposer les cellules, colonnes et lignes d'un tableau.

  • {{ Xref_cssinitial() }} {{ Cssxref("auto") }}
  • S'applique à éléments table et inline-table
  • {{ Xref_cssinherited() }} non
  • Média {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} comme spécifiée

Syntaxe

table-layout: inherit | auto | fixed 

Valeurs

{{ Cssxref("inherit") }}
{{ Cssxref("auto") }}
Un algorithme automatique de mise en forme est utilisé habituellement par la plupart des navigateurs pour disposer les tableaux. La largeur du tableau et de ces cellules dépendent du contenu.
fixed
La largeur du tableau et des colonnes est fixé par la largeur est éléments table et col ou par la largeur de la première ligne de cellules. Les cellules dans les lignes suivantes n'ont pas d'effet sur la largeur des colonnes.

Dans la méthode utilisant fixed, le tableau entier peut être affiché une fois que la première ligne a été chargée et analysée. Ceci peut accélérer le temps de rendu par rapport à la méthode dite automatique. Mais le contenu des cellules suivantes n'est peut-être pas adapté aux largeurs fixées. Toutes les cellules qui ont du contenu qui déborde utilisent la propriété {{ Cssxref("overflow") }} pour déterminer comment gérer ce débordement.

Exemples

.contentbox {
  table-layout: fixed;
}

Spécifications

Spécification État Commentaire
CSS 2.1 {{ Spec2('CSS2.1') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base {{ CompatUnknown() }} {{ CompatGeckoDesktop("1") }} 5.0 7.0 1.0
Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Voir également

  • {{ CSS_Reference:Table_Properties() }}

Source de la révision

<div>
  {{ CSSRef() }}</div>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>table-layout</code> définit l'algorithme utilisé pour disposer les cellules, colonnes et lignes d'un tableau.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }} </dfn> {{ Cssxref("auto") }}</li>
  <li><dfn>S'applique à </dfn>éléments <code>table</code> et <code>inline-table</code></li>
  <li><dfn>{{ Xref_cssinherited() }} </dfn> non</li>
  <li><dfn>Média </dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }} </dfn>comme spécifiée</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="eval">
table-layout: inherit | auto | fixed 
</pre>
<h3 id="Values" name="Values">Valeurs</h3>
<dl>
  <dt>
    {{ Cssxref("inherit") }}</dt>
  <dt>
    {{ Cssxref("auto") }}</dt>
  <dd>
    Un algorithme automatique de mise en forme est utilisé habituellement par la plupart des navigateurs pour disposer les tableaux. La largeur du tableau et de ces cellules dépendent du contenu.</dd>
  <dt>
    fixed</dt>
  <dd>
    La largeur du tableau et des colonnes est fixé par la largeur est éléments <code>table</code> et <code>col</code> ou par la largeur de la première ligne de cellules. Les cellules dans les lignes suivantes n'ont pas d'effet sur la largeur des colonnes.<br />
    <br />
    Dans la méthode utilisant fixed, le tableau entier peut être affiché une fois que la première ligne a été chargée et analysée. Ceci peut accélérer le temps de rendu par rapport à la méthode dite automatique. Mais le contenu des cellules suivantes n'est peut-être pas adapté aux largeurs fixées. Toutes les cellules qui ont du contenu qui déborde utilisent la propriété {{ Cssxref("overflow") }} pour déterminer comment gérer ce débordement.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<pre class="brush:css">
.contentbox {
  table-layout: fixed;
}
</pre>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">Spécification</th>
      <th scope="col">État</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS21/tables.html#width-layout" title="http://www.w3.org/TR/CSS21/tables.html#width-layout">CSS 2.1</a></td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>5.0</td>
        <td>7.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li>{{ CSS_Reference:Table_Properties() }}</li>
</ul>
Revenir à cette révision