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
<!DOCTYPE html> <head> <title>Pokus</title> </head> <body> <table> <thead> <tr><th rowspan="3" style="border:solid 2px black;width:200px;">Jméno</th><th colspan="31" style="font-weight:bold;font-size:20px;border:solid 2px black">Říjen</th></tr> <tr style="background-color:green"><th>Čt</th><th>Pá</th><th style="background-color:yellow;">So</th><th style="background-color:yellow;">Ne</th><th>Po</th><th>Út</th><th>St</th><th>Čt</th><th>Pá</th><th style="background-color:yellow;">So</th><th style="background-color:yellow;">Ne</th><th>Po</th><th>Út</th><th>St</th><th>Čt</th><th>Pá</th><th style="background-color:yellow;">So</th><th style="background-color:yellow;">Ne</th><th>Po</th><th>Út</th><th>St</th><th>Čt</th><th>Pá</th><th style="background-color:yellow;">So</th><th style="background-color:yellow;">Ne</th><th>Po</th><th>Út</th><th style="background-color:Orange;" title="Den vzniku samostatného československého státu">St</th><th>Čt</th><th>Pá</th><th style="background-color:yellow;">So</th></tr> <tr style="background-color:green;border-bottom:solid 2px black"><th>1</th><th>2</th><th style="background-color:yellow;">3</th><th style="background-color:yellow;">4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th style="background-color:yellow;">10</th><th style="background-color:yellow;">11</th><th>12</th><th>13</th><th>14</th><th>15</th><th>16</th><th style="background-color:yellow;">17</th><th style="background-color:yellow;">18</th><th>19</th><th>20</th><th>21</th><th>22</th><th>23</th><th style="background-color:yellow;">24</th><th style="background-color:yellow;">25</th><th>26</th><th>27</th><th style="background-color:Orange;">28</th><th>29</th><th>30</th><th style="background-color:yellow;">31</th></tr> </thead> <tbody> <tr style="border:solid 2px black"><td style="border: solid 2px black;font-weight:bold">Jméno Příjmení</td><td>8</td><td>8</td><td style="background-color:yellow;"></td><td style="background-color:yellow;"></td><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td><td style="background-color:yellow;">O</td><td style="background-color:yellow;">O</td><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td><td style="background-color:yellow;">O</td><td style="background-color:yellow;">O</td><td>8</td><td>8</td><td>8</td><td>8</td><td>8</td><td style="background-color:yellow;">O</td><td style="background-color:yellow;">O</td><td>8</td><td>8</td><td style="background-color:Orange;"></td><td>8</td><td>8</td><td style="background-color:yellow;">O</td></tr> <tr style="border:solid 2px black" id="akce"><td style="border: solid 2px black;font-weight:bold;">Akce</td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td style="background-color:yellow"><div><span>velice dlouhý text</span></div></td><td style="background-color:yellow"><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td style="background-color:yellow"><div><span>velice dlouhý text</span></div></td><td style="background-color:yellow"><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td style="background-color:yellow"><div><span>velice dlouhý text</span></div></td><td style="background-color:yellow"><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td style="background-color:yellow"><div><span>velice dlouhý text</span></div></td><td style="background-color:yellow"><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td style="background-color:Orange"><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td><div><span>velice dlouhý text</span></div></td><td style="background-color:yellow"><div><span>velice dlouhý text</span></div></td></tr> </tbody> </table> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
table, th, td{ border-collapse:collapse; border: solid black 1px; } #akce td{ font-weight:bold; width:100%; height:200px; } #akce td span{ -webkit-writing-mode: vertical-lr; /* Chrome, Safari 3.1+ */ -moz-writing-mode: vertical-lr; /* Firefox 3.5-15 */ -epub-writing-mode: vertical-lr; /* IE 9 */ -ms-writing-mode: vertical-lr; /* IE 9 */ -o-writing-mode: vertical-lr; /* Opera 10.50-12.00 */ writing-mode: vertical-lr; /* Firefox 16+, IE 10+, O*/ } #akce td span{ margin:auto; } #akce td div{ height:100%; width:100%; text-align:center; display:flex; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>