web-dev-qa-db-fra.com

Comment faire une largeur de rétrécissement de cellule de tableau pour s'adapter uniquement à son contenu?

Je veux que la table ait une largeur de 100%, mais une seule colonne doit avoir une largeur libre, comme:

| A | B | C                                                                  |

la largeur des colonnes A et B doit donc correspondre à la largeur de leur contenu, mais la largeur de C doit continuer jusqu'à la fin du tableau.

Ok, je pourrais spécifier la largeur de A et B en pixels, mais le problème est que la largeur du contenu de ces colonnes n'est pas fixe, donc si je fixe une largeur fixe, elle ne correspondra pas parfaitement au contenu :(

PS: je n'utilise pas les éléments de table réels, mais une liste DL enveloppée dans un div. Le div a display: table, dl has display: table-row et dt/dd display: cellule de table ...

htmlcsscss-tables
18
thelolcat

Si je vous ai bien compris, vous avez des données tabulaires mais vous souhaitez les présenter dans le navigateur en utilisant les éléments div (tableaux AFAIK et divs avec display: le tableau se comporte essentiellement de la même manière).

(voici un jsfiddle fonctionnel: http://jsfiddle.net/roimergarcia/CWKRA/ )

Le balisage:

<div class='theTable'>
    <div class='theRow'>
        <div class='theCell' >first</div>
        <div class='theCell' >test</div>
        <div class='theCell bigCell'>this is long</div>
    </div>
    <div class='theRow'>
        <div class='theCell'>2nd</div>
        <div class='theCell'>more test</div>
        <div class='theCell'>it is still long</div>
    </div>
</div>​

Et le CSS:

.theTable{
    display:table; 
    width:95%; /* or whatever width for your table*/
}
.theRow{display:table-row}
.theCell{
    display:table-cell;
    padding: 0px 2px; /* just some padding, if needed*/
    white-space: pre; /* this will avoid line breaks*/
}
.bigCell{
    width:100%; /* this will shrink other cells */
}​

Le plus triste, c'est que je ne pouvais pas faire ça il y a un an, quand j'en avais vraiment besoin -_-!

25
Roimer