Další dotaz, tentokrát přes chat (najdete ho vpravo dole), se týkal zafixování čtyř sloupců a dvou scrollovatelných do šířky. Tuto vlastnost můžete znát z MS Office, kde se buňky přichytávaly k okraji.
Řešení bylo pomocí první tabulky, která je zafixovaná překrývá tu druhou. Druhá tabulka je pomocí paddingu odsazená vedle té první.
HTML kód (s částí CSS):
<table id="fixni" style="text-align: left; width: 300px; max-height: 200px" border="1">
<tbody>
<tr>
<td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
<td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
<td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
<td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184. Klidně se i zalomí...</td>
</tdbody>
</table>
<table id="druha" style="text-align: left; min-width: 85px; min-height: 190px;" border="1">
<tdbody>
<td id="pohyb" style="min-width: 10px;">Pohodlně dlouhý text, kterému se
buňka přizpůsobí</td>
<td id="pohyb" style="min-width: 10px;">Pohodlně dlouhý text, kterému se
buňka přizpůsobí a může být stráááááááááááááááááááááááááááááááááááááááššššššššššššššněěěěěěěěěěěěěěěě dlouuuuuuuuuuuuuuhýýýýýýýtgrrfewgfzgezfgrfzugvczutfgewbdszfugwhejasgfzuuwgfhcbzwgfcwhegfzš</td>
</tr>
</tbody>
</table>
CSS kód:
#fixni {
position: fixed;
left: 0;
top: 0;
background: #8ECCF0;
z-index: 1
}
#fixni td {
max-width: 75px;
word-wrap: break-word
}
#druha {
padding-left: 324px;
margin: -8px;
}
Živá ukázka pomocí iframe ve stránce
Živá ukázka samotných tabulek (zkuste si zmenšit okno prohlížeče)