JSFiddle - React, Tailwind, and code Playground

by mill1on

HTML

<div class="header">
</div>
<div class="table-parent">
<table id="table_id" cellspacing="0">
<tr>
<td>
riadok
</td>
</tr>
</table>
</div>
<button id="add_row">Zvacsi tabulku</button>

CSS

* { box-sizing: border-box }
body{text-align:center}
table{border-style:solid; border-width:2px; border-color: #c3d2d9; width: 100%;}
td{padding: 10px 15px 10px 15px; color: #000000; border-bottom:1px solid black}
td:last-child{border-bottom:medium none}
.header{width:100%; height:80px; border:1px solid black}
.table-parent{width:100%; height:auto; position:relative;  border:1px solid black; padding:10%;border-top:medium none;margin:0 0 20px 0}

JavaScript

$(document).ready(function() {
$('#add_row').click(function() {
console.log('test');
 $('#table_id tr:last').after('<tr><td>novy riadok</td></tr>');
});
});