Tabulka se skrolováním

16. května 2006

•

Toto řešení ukazuje, jak s pomocí CSS snadno vytvořit tabulku s vertikálním skrolováním (posunováním obsahu). Uvedené řešení konkrétně využívá dvou vnořených tabulek. Jeho hlavní výhoda je v úspoře prostoru.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku VERTICAL SCROLLING TABLES.

CSS

.tabulkajedna
{
width:650px;
border-collapse:collapse;
margin:0 auto;
}
.tabulkadve
{
width:620px;
border-collapse:collapse;
}
.th1
{
width:99px;
}
.th2
{
width:199px;
}
.th3
{
width:59px;
}
.th4
{
width:89px;
}
.th5
{
width:200px;
}
.td1
{
width:99px;
}
.td2
{
width:199px;
}
.td3
{
width:59px;
}
.td4
{
width:99px;
}
.td5
{
width:171px;
}
.tabulkajedna
{
background:#008CA1;
border:1px solid #fff;
color:#fff;
}
.tabulkajedna td
{
border:1px solid #fff;
color:#fff;
}
.tabulkajedna tbody
{
font: bold 12px „Helvetica“, sans-serif;
background:#FFE880;
color:#0082A6;
}
.tabulkajedna caption
{
background:#fff;
color:#008CA1;
font-size:1.2em;
margin:0 auto;
}
.tabulkadve td
{
background:#ddd;
color:#000;
}
.tabulkajedna th, .tabulkadve th
{
text-align:left;
}
.tabulkadve tr.dk td
{
background:#eee;
color:#000;
}
.innerb
{
height:10em;
overflow:auto;
}

XHTML

<html>
<body>
<table class=“tabulkajedna“ summary=“Tabulka příletů“>
<caption>Přílety</caption>
<thead>
<tr>
<th class=“th1″ scope=“col“>Let</th>
<th class=“th2″ scope=“col“>Destinace</th>
<th class=“th3″ scope=“col“>Čas</th>
<th class=“th4″ scope=“col“>Terminál</th>
<th class=“th5″ scope=“col“>Poznámka</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=“5″>Datum: 14. Května 2006</td>
</tr>
</tfoot>
<tbody>
<tr><td colspan=“5″>
<div class=“innerb“>
<table class=“tabulkadve“>
<tr>
<th class=“td1″ scope=“row“>OK0967</th>
<td class=“td2″>Bratislava (Slovensko)</td>
<td class=“td3″>19:35</td>
<td class=“td4″>Sever 1</td>
<td class=“td5″>Přistálo</td>
</tr>
<tr class=“dk“>
<th scope=“row“>SN2813</th>
<td>Brusel (Belgie)</td>
<td>19:40</td>
<td>Sever 2</td>
<td>Přistálo</td>
</tr>
<tr>
<th scope=“row“>OK0789</th>
<td>Budapešť (Maďarsko)</td>
<td>19:50</td>
<td>Sever 1</td>
<td>Přistálo</td>
</tr>
</table>
</div>
</td></tr>
</tbody>
</table>
</body>
</html>