Tabulka s posuvníkem a pružnou šířkou
Tabulka u které je popis sloupců jednotlivých buněk viditelný i po scrollování směrem dolů. Její šířka není pevně stanovena a mění se v závislosti na velikosti viewportu.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Brett Merkey. Bližší popis najdete v článku Scrollable Table with Fixed Header.
CSS
div.obalTabulky
{
width: 95%;
height: 295px;
overflow: auto;
margin: 0;
}
table
{
width: 99%;
border: none;
background-color: #f7f7f7;
}
table>tbody
{ /* syntaxe kterou IE6 a starší nerozpozná */
overflow: auto;
height: 250px;
overflow-x: hidden;
}
thead tr
{
position:relative;
top: expression(offsetParent.scrollTop); /* pro IE5+ */
}
thead td, thead th
{
text-align: center;
font-size: 14px;
background-color: #666;
color: white;
font-weight: bold;
border-top: solid 1px #d8d8d8;
}
td
{
color: #000;
padding-right: 2px;
font-size: 12px;
text-align: right;
border-bottom: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
td:last-child
{
padding-right: 20px;
}
XHTML
<html>
<body>
<div id=“obal“>
<div class=“obalTabulky“>
<table cellspacing=“0″>
<thead>
<tr>
<td width=“18%“>Plody</td>
<td width=“38%“>Zásoby snězeny</td>
<td width=“28%“>Stav</td>
<td width=“16%“>Počet</td>
</tr>
</thead>
<tbody>
<tr>
<td>Jabka</td>
<td>09/12/2006</td>
<td>sklizeno</td>
<td>50</td>
</tbody>
</table>
</div>
</div>
</body>
</html>
Jirka
Led 6, 2010 v 16:55Bohužel toto nefunguje korektně ve Firefoxu, pokud je v tabulce málo řádků. Výška řádku se nastaví tak, aby byl vyplněn element tbody.
Nevypadá to pěkně. Pokud je záznamů tolik, že je zobrazen posuvník, je to ok.