Css:Thead (position:absolute) et (width 100%)

Fermé
ms2003 - 9 déc. 2011 à 16:57
 mpluss - 12 déc. 2011 à 12:26
Bonjour,
j'ai réalisé un scrolling sur un tableau tout en gardant l'entête fixe.
La largeur du tableau est égale à 100%, quelques colonnes ont une largeur fixe, les autres vont prendre le reste du 100%.
Je veux que les entêtes (TH) prennent toute la largeur du tableau, et que les colonnes (TD) respecte la largeur des entêtes (TH).
Merci à vous.

Voici le code :
<style>
#outer {
padding-top:60px;
width:100%;
position:relative;
}
#inner {
height:100px;
overflow-x:hidden;
overflow-y:auto;
width:100%;
}
table{
width:100%;
}
table thead {
position:absolute;
top:0;
width:100%;
}
</style>
<div id="outer">
<div id="inner">
<table border="1">
<thead>
<tr>
<th width="200">posuere urna</th>
<th width="200">posuere urna</th>
<th>posuere urna</th>
<th>posuere urna</th>
<th>posuere urna</th>
</tr>
<tr>
<th>posuere urna</th>
<th>posuere urna</th>
<th>posuere urna</th>
<th>posuere urna</th>
<th>posuere urna</th>
</tr>
</thead>
<tbody>
<tr>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
</tr>
<tr>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
</tr>
<tr>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
</tr>
<tr>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
</tr>
<tr>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
</tr>
<tr>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
</tr>
<tr>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
<td>posuere urna</td>
</tr>
</tbody>
</table>
</div>
</div>
A voir également:

1 réponse

Help !!
0