Les tableaux sont alignés avec des flottants au lieu d'être alignés avec des tableaux ?

Question

Je comprends l'utilité des flottants pour positionner les éléments les uns à côté des autres et les réduire à la taille voulue, mais comment faire pour obtenir un tableau de ce type ?

Column 1        |        Column 2        |        Column 3
Column 4 Bigger |        Column 5        |        Column 6

Vous remarquez que la première série de colonnes s'adapte à la longueur de l'élément le plus grand ? Ainsi, si la colonne 4 est plus large que la colonne 1, la colonne 1 sera automatiquement plus large ? Pour l'instant, la seule façon d'y parvenir est d'utiliser display : table et display : table-cell, mais c'est un peu bancal car je dois définir des largeurs spécifiques, etc. A moins que je ne fasse quelque chose de mal, peut-être que les tableaux sont en quelque sorte la meilleure façon de faire ce genre de choses... dans un web sans tableaux.

Answer 1

J'espère que cela répond à votre question :) :

<style>
.clear{
clear:both;
}

.column {
float:left;
height :20px;
width: auto ;
margin:5px;
display :block;
}
</style>

<div id = "Column 1 " class="column">
cell 1
<div class="clear"></div>
cell 4 Bigger
<div class="clear"></div>
cell 7
</div>

<div id = "Column 2 " class="column">
Cell 2
<div class="clear"></div>
Cell 5 
<div class="clear"></div>
Cell 8 
</div>

<div id = "Column 3 " class="column">
Cell 3
<div class="clear"></div>
Cell 6 
<div class="clear"></div>
Cell 9 
</div>

EDIT L'ajout d'une bordure est également très simple. Vous pouvez consulter cette URL : http://www.bernzilla.com/design/tables/table.html

Answer 2

Il n'y aurait aucun moyen de faire dépendre la largeur de la colonne 1 de la largeur de la colonne 4 plus grande (c'est-à-dire de l'élargir au fur et à mesure que la colonne 4 plus large s'élargit).

Au lieu de cela, vous pouvez enfermer la colonne 1 et la colonne 4 Wider dans un conteneur flottant, puis supprimer les flottants des colonnes 1 et 4. Faites de même pour les colonnes 2 et 5, et 3 et 6.