Tableau avec dernière cellule extensible

Bonjour,

J'aimerais avoir un tableau de données en largeur automatique, c'est-à-dire que chaque cellule s'adapte à son contenu, à l'exception de la dernière cellule du tableau qui doit s'étirer pour utiliser l'espace restant de son parent.

J'ai tenté le coup en mettant le table avec un width de 100%, mais la largeur des cellules semble approximative et ne s'ajuste pas parfaitement à son contenu.

Voici un aperçu de mon objectif avec du contenu varié :


J'ai effectué quelques tests, et ce qui se rapproche le plus de mon objectif est de mettre un width:auto au table, et de mettre un width:100% au dernier th, comme le troisième tableau dans ma page de tests.

Connaissez-vous une technique pour arriver à mes fins? Je suis ouvert à toutes les suggestions, même celles avec une dose de Javascript.

Merci!

Bonsoir,

Tu pourrais essayer :

<table id="extensible">
	<col/><col/><col/>
	<tr><td>123</td><td>1</td><td>50</td></tr>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="extensible.js"></script>

et pour le fichier «extensible.js»

$(function(){
  // La largeur de la dernière colonne reçoit la largeur du parent moins la largeur du tableau plus la largeur de la dernière colonne.
  $('#extensible col:last').width($('#extensible').parent().width() - $('#extensible').width() + $('#extensible col:last').width());
});

Modifié par adrien881 (08 Feb 2011 - 18:47)

Bonjour adrien,

Le principe est bon!

À moins qu'il existe une solution 100% CSS, ce dont je doute, je crois que je vais utiliser cette astuce pour y arriver. Je vais légèrement modifier le script pour que la fonction s'exécute aussi au redimensionnement de la fenêtre, mais à part ça, ça me semble impeccable. Je ferai quelques tests concrets pour le confirmer.

Merci de ton coup de main.

Pour les autres, si une solution 100% CSS existe, je suis à l'écoute!

Salut,
En rajoutant width 100% sur le conteneur ça à l'air de fonctionner chez moi (un peu sur le même principe que height 100% j'imagine.) Après est ce bien ça l'effet voulu ?

Bonjour Oliviadox,

Quel conteneur? Le <div id="cadre">?

Pour l'effet voulu, tu peux le voir en image dans mon premier message.

Ok, je crois que j'avais pas bien compris en fait..
Tu voudrais que ce soit toujours la dernière colonne qui s'allonge, alors que là c'est celle qui a le plus long contenu qui s’allonge pour prendre les 100% de place restante... Du coup j'ai pas de solutions à te proposer dans l'immédiat

Oui, c'est ça. Pour bien comprendre ce que je veux vraiment, en complément avec mon image, c'est le même principe qu'un tableau en largeur automatique, comme ceci :

table {
width:auto;
}

Puis, je veux combler l'espace qui n'est pas utilisée à la droite du tableau avec la dernière cellule.

Merci d'avoir tenté!