THEAD fixe et taille TD fixe
Bonjour,
Voici mon problème. Je possède un tableau avec un TBODY fixe déclaré comme ceci :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<div class="table_content" id="divtable">
<table id="tblnumero" width='98%'>
<thead>
<tr>
<th width='10%' align='center' colspan='2'>Actions</th>
<th style='cursor:pointer' align='left' onclick='javascript:sorttable(this,2)' width='30%'>Nom</th>
<th style='cursor:pointer' align='left' onclick='javascript:sorttable(this,3)' width='15%'>Numéro privé</th>
<th style='cursor:pointer' align='left' onclick='javascript:sorttable(this,4)' width='15%'>Numéro professionel</th>
<th style='cursor:pointer' align='left' onclick='javascript:sorttable(this,5)' width='15%'>Numéro de natel</th>
<th style='cursor:pointer' align='left' onclick='javascript:sorttable(this,6)' width='15%'>Date</th>
</tr>
</thead>
<tbody style='table-layout:fixed;'>
<tr class='select_even'><td width='5%' align='center'><img src='../images/remove.png' title="Effacer le contact" class='imgstd' onclick='javascript:numeroremove(this,629)' alt="Effacer le contact" /></td><td width='5%' align='center'><img src='../images/file_edit.gif' title="Modifier un contact" class='imgstd' onclick='javascript:numeromodif(this,629)' alt="Modifier un contact" /></td><td align='left'>Test</td><td align='left'>00000</td><td align='left'>00000</td><td align='left'>00000</td><td align='left'>2011-02-23 08:51:40</td></tr> </tbody>
</table>
</div> |
Et la partie CSS associée au tableau :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| .table_content {
height : 350px ;
width:100%;
overflow : hidden;
}
.table_content th
{
margin-bottom: 10px;
border: #CCC 1px solid;
background: #CCC;
}
/* Tout sauf IE 6 */
*>.table_content tbody
{
overflow: auto; height:300px; overflow-x: hidden;
}
/* CSS Hack, seulement IE */
*html .table_content{
overflow : scroll;
} |
Cela me permet d'avoir un tableau avec un scroll pour les données tout en ayant la partie THEAD fixe.
Le problème est que lorsqu'il y a assez de données le tableau marche très bien
http://img535.imageshack.us/img535/9051/tableau2v.jpg
Uploaded with ImageShack.us
Malheureusement lorsqu'il y a peu de contact, le premier TD prend la taille du tableau tout entier et ensuite les TD se compressent petit à petit pour prendre leur taille normal.
http://img341.imageshack.us/img341/6185/tableau1a.jpg
Uploaded with ImageShack.us
Comment puis-je procéder pour avoir une taille pour les TD fixe dès le début... j'ai parcouru des forums et essayer des techniques sans succès
