Fork me on GitHub
/ Sweet home / Blog / Archives / Des lignes de tableau "à la Gmail" ... /

Des lignes de tableau "à la Gmail" ...

Last update: 2011-03-02 02:14:38

... c'est à dire sans coupure de ligne et sans pour autant que la cellule ne change de taille en cas de dépassement ? C'est assez simple en associant la propriété de tableau "table-layout" à sa valeur "fixed", la propriété "white-space" et les éléments "colgroup" et "col":
/* CSS */
table
{
  border:1px solid black;
  padding:10px;
  background-color:pink;
  width:100%;
  table-layout:fixed;
}
td
{
  overflow:hidden;
  white-space:nowrap;
  width:100%;
}
Résultat : une ligne de tableau parfaitement flexible. :-)
<< Design SQL dans le navigateur
Hello world! >>
 

Comment this