Tabulka s posuvníkem a pružnou šířkou
Obsah
Související
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>
Mohlo by vás také zajímat
-
-
-
Praktické rady na zabezpečení redakčního systému WordPress
27. února 2023 -
Nejlevnější VPS: To je nový Cloud Server Mini od ZonerCloud
4. června 2024
Nejnovější
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024
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.