Le 26/10/2008 dans DevBlog

Cellule de table qui s'élargie en fonction du contenu

J’ai eu affaire récemment à un cas plutôt rare dans la longue liste des bugs de rendu sous IE.
Un input text de largeur exprimé en %, dans une cellule de tableau : si on lui met un contenu long, et sans espace (un email par exemple), la cellule du tableau est poussé en fonction de la longueur du texte de l’input.

Vous avez alors beau vous battre avec tous les overflow, width et autres display le problème est insolvable : les cellules d’un tableau sont prévus pour s’adapter à leur contenu, et IE décide d’agrandir l’input si celui-ci contient une longue chaîne.

La solution c’est la propriété table-layout ! C’est elle qui dit comment le navigateur est censé calculer la largeur des cellules du tableau, elle a 3 valeurs possibles :

  • auto : valeur par défaut, le contenu fait sa place et les width appliqué au tableau ne sont que des valeurs minimale
  • inherit : comme son nom l’indique, c’est papa qui décide
  • fixed : la valeur qui m’a sauvé ! Avec elle, toutes les cellules prennent la même largeur sans se soucier du contenu, et si on spécifie une width, elle est appliqué et respecté.

C’est (je pense) une propriété CSS assez méconnu et c’est pour ça que j’en parle :) (et ça me sert de mémo pour plus tard aussi ;) ), cela dit ça n’explique pas le problème de l’input qui prend la largeur de son contenu.

Les sources de test : sans layout:fixed/avec layout:fixed.