Aller au contenu

Hauteur des lignes d'un tableau a 100% de la hauteur


Velvounet

Sujets conseillés

Voilà mon problème, je souhaite faire un tableau qui fasse 100% de la hauteur avec des lignes de hauteur differentes.

voici mon code XHTML (validé W3C)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="allure.css"/>
<title>Title</title>
</head>

<body>
<table border="1px" cellspacing="0" cellpadding="0" width="100%" class="mainbox">
<thead>
<tr class="up">
<td>
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="upleft"> </td>
<td class="middle"> </td>
<td class="upright"> </td>
</tr>
</table>
</td>
</tr>
</thead>
<tfoot>
<tr class="down">
<td>
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="downleft"> </td>
<td class="middle">  </td>
<td class="downright"> </td>
</tr>
</table>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>

</body>
</html>

et voici mon code css allure.css :

html, body, table.mainbox{
margin: 0;
padding: 0;
height: 100%;
}

/********TABLEAU**********/
table.mainbox {
border-width: 0px;
margin-right: 1px;
margin-left: 1px;
}

tr.up,tr.down {
height:30px;
}

td.middle {
background-color:#84be49;
color:#fff;
height:100%;
}

td.upleft {
background-image:url(images/borduregauche.gif);
background-position:center;
width: 30px;
height:30px;
}

td.upright {
background-image:url(images/borduredroite.gif);
background-position:center;
width: 30px;
height:30px;
}

td.downleft {
background-image:url(images/bordurebassegauche.gif);
background-position:center;
width: 30px;
height:30px;
}

td.downright {
background-image:url(images/bordurebassedroite.gif);
background-position:center;
width: 30px;
height:30px;
}

cette page marche sous firefox, mais pas sous IE... comment faire???

je vais essayer avec des frames... je vois pas d'autres solutions... quelqu'un a une idée?

Modifié par Velvounet
Lien vers le commentaire
Partager sur d’autres sites

je pense avoir trouver un élément de réponse , quand on enleve ce code, ca marche. mais ce n'est plus un document XHTML...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...