[Résolu -> youhouhou !] Mise en page d'un tableau (table)

Bonjour,

Je dois mettre en forme un tableau, voici son code html :

<table cellpadding="0" cellspacing="0" class="contenttoc" align="right">
	<tr>
		<th>Index de l'article</th>
	</tr>
	<tr>
		<td><a href="#" class="toclink">test 1</a></td>
	</tr>
	<tr>
		<td><a href="#" class="toclink">test 2</a></td>
	</tr>
</table>

Ma difficulté est que mon table doit avoir une hauteur fixe :

table.contenttoc {
  ...
  width:180px;
  height:200px;
  ...
}

donc le résultat est que mes 2 ligne TD et mon TH prennent toute la hauteur dispo, en l'occurence 66.6px chacun, c'est pas beau.

Moi ce que je voudrai faire, c'est affecter une hauteur de ligne à chaque TD et TH, par exemple 20px, et que le reste du tableau (140px) reste vide, jusqu'au bord inférieur du table.

Mon problème est que je n'arrive pas a mes fin, j'ai essayé avec des padding, margin, line-height, table-layout, ...

Voici un petit croquis de ce qu'il me fait :

table hauteur 200px
--------------
|
|  TH h=66px
|
--------------
|
|  TD h=66px
|
--------------
|
|  TD h=66px
|
--------------

Voici un petit croquis de ce je veux :

table hauteur 200px
--------------
|  TH h=20px
--------------
|  TD h=20px
--------------
|  TD h=20px
--------------
|  
|
|  ici du vide h=140px
|
|
--------------

Si je ne suis pas clair je peux faire un croquis en dessin

Bon, en fait mon but est d'avoir une image à bords arrondis sous mon table, l'idéal serai que l'image s'adapte a la hauteur du table, donc dans ce cas je ne devrai plus fixer la hauteur a 200px.
Modifié par pelloq1 (28 Mar 2008 - 12:31)

Salut,

Je ne suis pas sur de bien comprendre, mais je vais quand meme essayer de répondre.

Donc si j'ai bien comprit tu veut que les <td> soit tous de la meme hauteur sauf le dernier pour pouvoir y mettre une image qui representerai un arrondis.

Voila ce que je te propose :

td {
  height:20px;
}

th {
   height:20px;
}
/* Class pour le dernier td */

.td_last {
width:--px;
height:--px;
background-image:url('ton-image') repeat-x;
background-color:#xxxxxx;
}

Biensur les dimension sont à adapter.

a++

Merci,

Non cela ne fonctionne pas car je ne peux pas intervenir sur le code html.

J'ai contourné mon problème.