5568 sujets

Sémantique web et HTML

Tableau et probléme de largeur de colonnes

Bonjour à tous,
Bon voilà, je cherche mais je ne trouve pas comment faire ce truc basique (me semble t-il en tout cas).
L'idée est le suivante :
Pour faire très simple, je souhaite faire un tableau de 1 ligne et 2 colonnes ayant les caractéristiques suivantes :
- La largeur globale du tableau est fixée (disons width : 50%)
- La largeur de la première colonne s'adapte au contenu texte de la cellule
- La largeur de la seconde colonne s'adapte automatiquement pour combler le reste du tableau

L'image devrait être plus claire.

upload/43247-scheme.jpg

Je peux préciser si besoin.
Merci pour vos avis éclairés.

Bodhi
Bonjour,

Quelque chose comme:
table {
  width: 50%;
}
td:first-child {
  width: 10% /* ou autre valeur faible */
  white-space: nowrap;
}
td:first-child + td {
  width: 90%;
}
Salut et merci pour cette réponse,
Il s'agit là du CSS et sans vouloir faire mon gros boulet, le HTML pour la table donnerait quoi ?
En gros, j'en suis là, mais après ?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
table {width: 50%;}
td:first-child {width: 10%; white-space: nowrap;}
td:first-child + td {width: 90%;}
-->
</style>
</head>

<body>
</body>
</html>
BODHI a écrit :
sans vouloir faire mon gros boulet, le HTML pour la table donnerait quoi ?

Rien de spécial, un code de tableau tout ce qu'il y a de plus basique. Ça se trouvera dans le premier livre, tutoriel venu, ou même dans la spécification HTML.

Donc quelque chose comme:
<table>
  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

Bien sûr, suivant le contenu exact, on aura peut-être une ligne d'en-tête avec des <th scope="col">...</th> à la place des <td>...</td>, ou bien des TH en première colonne (<th scope="row">...</th>). Il faut voir en fonction du contenu.

Et dans le CSS que je donne on utilise des sélecteurs CSS 2.1 et on applique ces styles à tous les tableaux de la page. On voudra sans doute restreindre l'application des styles à certains tableaux précis, peut-être en passant par une ou plusieurs classes.
Sujet clos
Aller à