Une telle chose est-elle possible en utilisant CSS et deux balises DIV inline-block (ou autre) au lieu d'utiliser une table?
La version du tableau est la suivante (bordures ajoutées pour que vous puissiez la voir):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>
Il produit une colonne de gauche avec une LARGEUR FIXE (pas un pourcentage de largeur) et une colonne de droite qui se développe pour remplir L'ESPACE RESTANT sur la ligne. Cela semble assez simple, non? De plus, puisque rien n'est "flottant", la hauteur du conteneur parent se développe correctement pour englober la hauteur du contenu.
--BEGIN RANT--
J'ai vu les implémentations "clear fix" et "Holy Grail" pour les mises en page multi-colonnes avec colonne latérale à largeur fixe, et elles sont nulles et compliquées. Ils inversent l'ordre des éléments, utilisent des largeurs en pourcentage ou utilisent des flottants, des marges négatives et la relation entre les attributs «gauche», «droite» et «marge» est complexe. En outre, les mises en page sont sensibles aux sous-pixels, de sorte que l'ajout d'un seul pixel de bordures, de remplissage ou de marges cassera l'ensemble de la mise en page et enverra des colonnes entières à la ligne suivante. Par exemple, les erreurs d'arrondi sont un problème même si vous essayez de faire quelque chose de simple, comme mettre 4 éléments sur une ligne, avec chacun une largeur de 25%.
--END RANT--
J'ai essayé d'utiliser "inline-block" et "white-space: nowrap;", mais le problème est que je n'arrive pas à obtenir le 2ème élément pour remplir l' espace restant sur la ligne. Définir la largeur sur quelque chose comme "width: 100% - (LeftColumWidth) px" fonctionnera dans certains cas, mais effectuer un calcul dans une propriété width n'est pas vraiment pris en charge.
display: table-*
construction qui fonctionnera, mais qui n'est pas vraiment "plus sémantique" non plus (étant un cas terrible dediv
soupe) et qui rompt la compatibilité avec IE6. Personnellement, je m'en tiendrai au<table>
, à moins que quelqu'un n'arrive à trouver une idée simple et géniale qui fonctionne sans