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
<table id="popisky"> <tr> <th>Jméno</th><th>E-mail</th><th>Popis</th><th>Funkce</th><th>Akce</th> </tr> <tr> <td>Běžný Uživatel</td> <td>bezny@uzivatel.cz</td> <td>Popis běžného uživatele.</td> <td>Uživatel</td> <td><button>Smazat</button><button>Upravit</button></td> </tr> <tr> <td>Franta Fytopuf</td> <td>franta@fytopuf.cz</td> <td>Popis běžného fytopufu.</td> <td>Rostlinář</td> <td><button>Smazat</button><button>Upravit</button></td> </tr> </table> <script>pridatPopisky(document.getElementById("popisky"));</script>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* rozlámání */ td, th, tr, thead, tbody, tfoot, table {display: block} th {display: none;} td:before {font-weight: bold; content: attr(popisek) ": "; display: inline-block; width: 100px} tr {margin-bottom: 1em; background: #efefef;}
CSS
Autoformát
CSS reset
Až na konci
function pridatPopisky(el) { var popisky = el.getElementsByTagName("th"); var radky = el.getElementsByTagName("tr"); for (var i = 1; i < radky.length; i++) { var bunky = radky[i].getElementsByTagName("td"); for (var j = 0; j < bunky.length; j++) { bunky[j].setAttribute("popisek", popisky[j].innerHTML); } } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>