Discussion :

[jmalfoy]

Bonjour,
Voici mon problème. Je possède un tableau avec un TBODY fixe déclaré comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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&eacute;ro priv&eacute;</th>
     <th style='cursor:pointer' align='left' onclick='javascript:sorttable(this,4)' width='15%'>Num&eacute;ro professionel</th>
     <th style='cursor:pointer' align='left' onclick='javascript:sorttable(this,5)' width='15%'>Num&eacute;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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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


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.


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

[jmalfoy]

Bon j'ai résolu temporairement le problème en changeant directement en javascript le height du tbody selon le nombre de ligne. A l'arrache mais ca marche