Bonjour,
J'ai construit un tableau imbriqué dont le corps de l'en-tête reste fixe et
le corps du texte défile, mais je n'arrive pas à faire coïncider les colonnes
des deux tableaux pour les différents navigateurs.
Y a-t-il une solution ?
De même je n'arrive pas à encadrer le texte du « tfoot » ?
et donner une plus grande hauteur à l'en-tête ?
Je joins le code de ma page.
Merci pour votre aide.
Salutations
<!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=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
.table-1 {width:894px; border-collapse:collapse; margin:0 auto;}
.table-2 {width:876px; border-collapse:collapse;}
.th1 {width:170px;}
.th2 {width:120px;}
.th3 {width:65px;}
.th4 {width:145px;}
.th5 {width:145px;}
.th6 {width:80px;}
.th7 {width:130px;}
.td1 {width:170px;}
.td2 {width:120px;}
.td3 {width:65px;}
.td4 {width:145px;}
.td5 {width:145px;}
.td6 {width:80px;}
.td7 {width:120px;}
.table-1 th {
color : #996600;
background-color : #ffcc66;
border : 1px solid #ddeeff;
border-collapse : separate;
font-variant : small-caps;
font-size : 0.8em;
letter-spacing : 1px;
}
.table-1 tfoot {
color : #996600;
background-color : #ffcc66;
border : 1px solid #ddeeff;
border-collapse : separate;
font-variant : small-caps;
font-size : 0.7em;
letter-spacing : 1px;
}
.table-1 tr.lig-1 td {
background-color : #cccccc;
border : 1px solid #ddeeff;
border-collapse : separate;
font-variant : small-caps;
text-align : center;
}
.table-2 tr.lig-2 td {
background-color : #b8c7d3;
border : 1px solid #ddeeff;
border-collapse : separate;
font-variant : small-caps;
text-align : center;
}
.contenu {height:15em; overflow:auto;}
</style>
</head>
<body>
<table class="table-1">
<thead>
<tr>
<th class="th1" scope="col">Description</th>
<th class="th2" scope="col">Dates du - au </th>
<th class="th3" scope="col">Prix</th>
<th class="th4" scope="col">Inscription du - au </th>
<th class="th5" scope="col">Lieu</th>
<th class="th6" scope="col">Observations</th>
<th class="th7" scope="col">Préparé par</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">Pour plus de détails voir: A VOS AGENDASxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
<td colspan="2">mis à jour le :31/10/08 par :Gérard et Jacques </td>
</tr>
</tfoot>
<tbody>
<tr><td colspan="7">
<div class="contenu">
<table class="table-2">
<tr class="lig-1">
<td class="td1">aaaaaaaaa aaaaaaa aaaaaaaaaaaaaaa</td>
<td class="td2">Mardi 25 Novembre 2008</td>
<td class="td3">00.00 €</td>
<td class="td4">Du 14 au 21 Novembre 2008</td>
<td class="td5">xxxxxxxxxxx : 11h30</td>
<td class="td6"></td>
<td class="td7">xxxxxxxxxx</td>
</tr>
<tr class="lig-2">
<td>bbbbbbbbb bbbbbbbbbb bbbbbbbbbbbbb bbbbbbb</td>
<td>Mercredi 10 Décembre 2008</td>
<td>00.00 €</td>
<td>Fin des inscriptions 5 décembre 2008</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxx</td>
<td>xxxxxxxx</td>
</tr>
<tr class="lig-1">
<td>cccccccccccccccc cccccccccccccccccc cccccccccc</td>
<td>Dimanche 14 Décembre 2008</td>
<td>00.00 €</td>
<td>fin des inscriptions 14 novembre 2008</td>
<td>xxxxxxxxxxx</td>
<td>xxxxxxxxxxxxx</td>
<td>xxxxxxxxxx</td>
</tr>
<tr class="lig-2">
<td>eeeeeeeeeeeeee eeeeeeeeeeeeeee eeeeeeeeeeeeeeeeee</td>
<td>Mardi 16 Décembre 2008</td>
<td>00.00 €</td>
<td>Du 5 au 12 décembre 2008</td>
<td>xxxxxxxxxxx: 18h30</td>
<td></td>
<td>xxxxxxxxxx</td>
</tr>
<tr class="lig-1">
<td>lllll llllll llllll</td>
<td>Jeudi 15 Janvier 2009</td>
<td>00.00 €</td>
<td>Du 5 au 12 janvier 2009</td>
<td>xxxxxxxxxx :14h00</td>
<td></td>
<td>xxxxxxxxx</td>
</tr>
<tr class="lig-2">
<td>fffffffffffffff fffffffffffffffff ffffffffffffffff</td>
<td>Dimanche 18 Janvier 2009</td>
<td>00.00 € </td>
<td>Fin des inscriptions 19 décembre 2008</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxx</td>
<td>xxxxxxxxx</td>
</tr>
<tr class="lig-1">
<td>ggggggggggg gggggggggggggg gggggggggggggg gggggggggggggg</td>
<td>Dimanche 15 mars 2009</td>
<td>00.00 € </td>
<td>Fin des inscriptions 30 octobre 2008</td>
<td>xxxxxxxx</td>
<td>xxxxxxxxxxxxxx</td>
<td>xxxxxxxxxxx</td>
</tr>
<tr class="lig-2">
<td>hhhhhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhhhhh hhhhhhhhh</td>
<td>Mardi 17 Mars 2009</td>
<td></td>
<td>Du 6 au 13 mars 2009</td>
<td>xxxxxxxxxxxx 11h30</td>
<td></td>
<td>xxxxxxxxxxx</td>
</tr>
</table>
</div>
</tbody>
</table>
</body>
</html>