Accueil    CSS    Propriété Table-layout
 



style css table-layout  Style CSS table-layout

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété table-layout indique la manière à employer pour préparer le rendu d'un tableau html. Ce rendu peut se faire :
soit en ignorant le contenu des cellules et en appliquant juste les informations relatives aux tailles des colonnes : valeur "fixed"
soit en tenant compte du compte du contenu des cellules : valeur "auto"

Si la valeur "fixed" est choisie, il faut faire attention à d'éventuels débordements du texte en dehors des cellules.



Propriétés pour le style border-collapse :




Propriété Définition Valeurs CSS
table-layout Indique le mode de rendu à appliquer pour afficher un tableau auto
fixed
inherit
CSS 2


Exemple d'utilisation du style css border-collapse :





Exemple de tableau avec table-layout:auto :

<table style="width:560px; border-collapse:collapse; table-layout:auto;">
   <tr>
      <td>colonne1avectextelongprovoquantundepassement</td>
      <td>colonne 2 avec texte espacé</td>
      <td>colonne 3 courte</td></tr>
   <tr>
      <td>exemple</td>
      <td>exemple</td>
      <td>exemple</td>
   </tr>
</table>


Exemple de tableau avec table-layout:fixed :

<table style="width:560px; border-collapse:collapse; table-layout:fixed;">
   <tr>
      <td>colonne1avectextelongprovoquantundepassement</td>
      <td>colonne 2 avec texte espacé</td>
      <td>colonne 3 courte</td></tr>
   <tr>
      <td>exemple</td>
      <td>exemple</td>
      <td>exemple</td>
   </tr>
</table>



Exemple de tableau avec table-layout:auto :
la mise en forme tient compte du texte des cellules

colonne1avectextelongprovoquantundepassementcolonne 2 avec texte espacécolonne 3 courte
exempleexempleexemple


Exemple de tableau avec table-layout:fixed :
la mise en forme ne tient pas compte du texte des cellules

colonne1avectextelongprovoquantundepassementcolonne 2 avec texte espacécolonne 3 courte
exempleexempleexemple