Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<meta name="viewport" content="width=device-width,initial-scale=1"> <h1>Obalení tabulky do <code>overflow-y: auto</code></h1> <h2>Dlouhá tabulka s posuvníkem</h2> <p>Bude mít posuvník.</p> <div class="overflow"> <table> <tr> <td>Lorem.</td> <td>Optio!</td> <td>Sint!</td> <td>Ea!</td> <td>Repudiandae.</td> <td>Similique!</td> <td>Libero.</td> <td>Hic.</td> <td>Quo?</td> <td>Facilis?</td> <td>Voluptatibus!</td> <td>Modi!</td> <td>Ipsum.</td> <td>Dolor!</td> <td>Tempora.</td> <td>Sapiente.</td> <td>Consequatur.</td> <td>Amet.</td> <td>Quas?</td> <td>Iure.</td> </tr> <tr> <td>Lorem.</td> <td>Sed.</td> <td>Totam.</td> <td>Eum?</td> <td>Eius.</td> <td>Repudiandae.</td> <td>Aliquid.</td> <td>Ut.</td> <td>Error.</td> <td>Vel.</td> <td>Vitae!</td> <td>Temporibus.</td> <td>Illo?</td> <td>Nemo.</td> <td>Reprehenderit!</td> <td>Temporibus.</td> <td>Perferendis.</td> <td>Beatae.</td> <td>At.</td> <td>Corporis!</td> </tr> <tr> <td>Lorem.</td> <td>Suscipit!</td> <td>Itaque?</td> <td>Fugit!</td> <td>Illum.</td> <td>Numquam.</td> <td>Veniam.</td> <td>Soluta!</td> <td>Illo.</td> <td>Impedit?</td> <td>Architecto?</td> <td>Pariatur?</td> <td>Ducimus!</td> <td>Voluptas.</td> <td>Est!</td> <td>Omnis.</td> <td>Aspernatur!</td> <td>Ducimus.</td> <td>Eius.</td> <td>Natus.</td> </tr> <tr> <td>Lorem.</td> <td>Voluptatibus.</td> <td>Sunt.</td> <td>Accusantium?</td> <td>Autem?</td> <td>Delectus.</td> <td>Ex.</td> <td>Deleniti.</td> <td>Voluptas.</td> <td>Commodi.</td> <td>Consequatur.</td> <td>Eos!</td> <td>In.</td> <td>Ipsa.</td> <td>Temporibus.</td> <td>Sequi.</td> <td>Et.</td> <td>Explicabo?</td> <td>Neque!</td> <td>Ut?</td> </tr> <tr> <td>Lorem.</td> <td>Eligendi.</td> <td>Hic.</td> <td>Saepe.</td> <td>Id.</td> <td>Veniam!</td> <td>Ratione.</td> <td>Quae.</td> <td>Provident?</td> <td>Porro.</td> <td>Expedita!</td> <td>Aliquam.</td> <td>In?</td> <td>Dolore.</td> <td>A?</td> <td>Corporis.</td> <td>Provident?</td> <td>Architecto.</td> <td>Iste.</td> <td>Aspernatur?</td> </tr> </table> </div> <h2>Krátká tabulka</h2> <p>Zobrazí se standardně.</p> <div class="overflow"> <table> <tr> <td>Lorem.</td> <td>Pariatur?</td> <td>Modi.</td> <td>Optio.</td> <td>Cupiditate.</td> </tr> <tr> <td>Lorem.</td> <td>In!</td> <td>Blanditiis.</td> <td>Provident.</td> <td>Veniam.</td> </tr> </table> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.overflow { overflow-y: auto; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>