Comment développer visuellement un élément HTML dans un bloc div?

Question

J'ai divisé ma page HTML en utilisant des blocs div. Dans l'un des blocs div, j'ai créé une table. Je veux étendre la largeur de cette table à tout l'espace disponible.

2 problèmes: A) Si je règle la largeur de la table à 100%, elle semble augmenter la taille de la page entière, pas le bloc div. B) En outre, il ne semble pas être coupé par le bloc div parent (c'est-à-dire qu'il déborde).

Si j'utilise des cadres, ce problème disparaîtra ... mais je ne veux pas utiliser de cadres.

Est-ce que quelqu'un a une solution en HTML/CSS?

Answer 1

Vous avez besoin d'une largeur statique sur votre conteneur div:

div.container { width: 400px; overflow: hidden; } 
div.container table { width: 100%; } 

<div class="container"> 
    <table><tr><td>something</td></tr></table> 
</div> 

Answer 2

Vous voulez probablement mettre position l'attribut css de la table à relative pour le dimensionnement par rapport au travail.