<table id="table">
<thead>
<tr>
<th>Название</th>
<th>Название</th>
<th>Название</th>
</tr>
</thead>
<tbody>
<tr>
<td>Скрыть</td>
<td>Скрыть</td>
<td>Скрыть</td>
</tr>
<tr>
<td>Скрыть</td>
<td>Скрыть</td>
<td>Скрыть</td>
</tr>
<tr>
<td>Скрыть</td>
<td>Скрыть</td>
<td>Скрыть</td>
</tr>
</tbody>
</table>
<br><br>
<button>Показать все</button>
table {
border: 1px solid #000;
}
table thead th {
font-weight: bold;
text-align: center;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
table thead th:last-child {
border-right: 0 !important;
}
table thead th, table tbody td {
padding: 10px;
font-size: 12pt;
font-family: Verdana, Tahoma;
}
table tbody td {
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
table tbody td:last-child {
border-right: 0 !important;
}
table tbody tr:last-child td {
border-bottom: 0 !important;
}
table tbody tr:nth-child(even) {
background-color: #eee;
}
$(function () {
$('#table tr').each(function(){
$content = $(this).find('td').html(); // html of tr
$height_tr = $(this).height(); // Height tr
$(this).find('td').html('<div class="hide" >' + $content + '</div>');
$(this).css('height', $(this).height());
});
$('tr').on('click', function () {
$(this).slideToggle(700);
$(this).find('div.hide').slideToggle(700);
});
$('button').on('click', function() {
$('tbody tr, tbody tr .hide').slideDown();
});
});
This Pen doesn't use any external CSS resources.