JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<table>
<thead>
<tr>
<th>Код</th>
<th>Район</th>
<th>Адрес</th>
<th>Сторона</th>
<th>Тип</th>
<th>Доступность</th>
</tr>
</thead>
<tbody>
<tr class="spoiler-trigger-001">
<td>001</td>
<td><a href="#" class="link-hover" rel="img/board-001-a-small.jpg">***</a>
</td>
<td><a href="#" class="link-hover" rel="img/board-001-a-small.jpg">Улица Пушкина, дома Колотушкина</a>
</td>
<td>А</td>
<td>Билборд 6х3 м</td>
<td>Доступен</td>
</tr>
<tr class="spoiler-block spoiler-block-001">
<td colspan="6">
<div class="table-left-column"> <b>Код:</b> 001
<br/>
<br/> <b>Город:</b> ***
<br/>
<br/> <b>Район:</b> ***
<br/>
<br/> <b>Адрес:</b> Улица Пушкина, дом Колотушкина
<br/>
<br/> <b>Сторона:</b> А
<br/>
<br/> <b>Тип:</b> Билборд 6х3 м
<br/>
<br/> <b>Освещение:</b> уличное освещение
<br/>
<br/> <b>Дополнительная информация:</b> ***
<br/>
<div id="board-001-a" class="button button-order contact-trigger">Заказать</div>
</div>
<div class="table-right-column">
</div>
</td>
</tr>
<tr class="spoiler-trigger-002">
<td>002</td>
<td><a href="#" class="link-hover" rel="img/board-002-a-small.jpg">***</a>
</td>
<td><a href="#" class="link-hover" rel="img/board-002-a-small.jpg">Улица Пушкина, дома Колотушкина</a>
</td>
...
CSS
table {
width:100%;
margin:50px 0;
font-size:16px;
color:#222;
}
thead {
text-transform:uppercase;
background:#fff;
}
tbody {
font-size:16px;
cursor:pointer;
}
table a {
color:#222;
}
th, td {
padding:15px;
border-bottom:1px solid #222;
border-right:1px solid #222;
}
th:last-child, td:last-child {
border-right:none;
}
.spoiler-block {
display:none;
}
.spoiler-block:last-child td {
border-bottom:none;
}
.table-left-column {
float:left;
width:50%;
font-weight:normal;
text-align:left;
}
.table-right-column {
float:right;
}
JavaScript
$(document).ready(function () {
$(".spoiler-block").hide().prev().click(function () {
$(this).next().slideToggle();
});
});