twitter bootstrap responsive : une table et ça déborde

tolwin
Les bases HTML/CSS

Bonjour à tous,

Je m'essaye au mode responsive du twitter bootstrap. Dans l'ensemble, les résultats sont très sympas. Mais je bute sur un problème.

Je liste des articles, certains contenant des photos dont certaines sont larges. L'ensemble est dans un container-fluid. C'est parfait : les images se retaillent toutes seules, rien ne déborde, magique !

J'ai changé la mise en page en mettant les articles dans une table, qui est toujours elle-même dans le container-fluid. Et là rien ne va plus. Les images larges ne sont plus retaillées, le container-fluid déborde de l'écran, tout le contenu de la table s'étale sur la largeur la plus grande et donc l'affichage de chaque ligne est allongé. Une horrible scrollbar apparait en bas pour concrétiser cet échec.

Je n'ai rien trouvé au sujet d'une classe du genre table-fluid. J'ai tenté de remettre un container-fluid juste autour de la table, rien. A chaque ligne, dans la cellule du contenu, rien. Je peux contourner le soucis en enlevant la table. Après tout, je n'ai qu'une seule colonne par ligne : le contenu de la page. L'utilisation d'une table n'est pas forcément indiquée. Mais maintenant je me demande quelle autre table du site risque de se déverser où elle veut malgré des container-fluid.

Quelqu'un peut-il m'aider à mater la largeur des tables ?

Merci !

2 réponses

tolwin
Auteur
Réponse acceptée

Merci lecineman, j'ai commencé avec ton approche. Puis j'ai mis la main sur une option CSS que je ne connaissais pas :
table.test{table-layout:fixed;}

Là, c'est pile poil ce qu'il me fallait. Qu'est ce que c'est que ce monde où avoir une table qui ne déborde pas de son conteneur, c'est une option !

edit :
Je viens de regarder des descriptions de table-layout. Il est dit que en mode table-layout:auto, le navigateur adapte la largeur des cellules à leur contenu, et en fixed ça n'est plus le cas. La chose mise en avant est le temps de calcul nécessaire pour adapter ces largeurs, ce qui fait qu'une table fixed s'affiche plus vite qu'une table auto. Intuitivement, quand on me parle de largeur de cellules, je comprends largeur des cellules au sein de la largeur de la table. Mais non ! Même après avoir lu plusieurs sites, je ne suis pas tombé sur une description disant explicitement qu'en auto, c'est carrément la largeur de toute la table qui peut être affectée au point de déborder du conteneur.

J'ai eu du bol de tomber sur un message sur stack overflow qui proposait cette solution. En lisant les descriptions, je n'aurais pas vu le lien avec mon problème !

Lecineman

A vrai dire je sais pas trop... Mais tu peux forcer une largeur en CSS, moi je l'ai fait car certains alignement ne se faisaient pas avec span12 et span9. Bref...

En css la largeur

table { width: 250px;}

ça ne marche pas forcement

et quand tu force 

table { width: 250px !important;}

ça peut marcher

Good luck ;)