JSFiddle - React, Tailwind, and code Playground
by mixailhr
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th class="">Марка автомобиля</th>
<th>Грузоподъем-
<br />ность, т.</th>
<th>Объем кузова, м<span class="times">³</span>
</th>
<th>Стоимость часа, руб.</th>
<th>Стоимость км за МКАД, руб.</th>
<th>Минимальный заказ, ч.</th>
<th>Стоимость минимального заказа, руб.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Газель,
<br />Ford Transit
<br />и аналоги</td>
<td>1,5</td>
<td>10–16</td>
<td>550</td>
<td>18</td>
<td>4 + 1</td>
<td>2750</td>
</tr>
<tr>
<td>Бычок и аналоги</td>
<td>до 3</td>
<td>16–25</td>
<td>750</td>
<td>25</td>
<td>6 + 1</td>
<td>5250</td>
</tr>
<tr>
<td>Зил и аналоги</td>
<td>до 5</td>
<td>до 36</td>
<td>800</td>
<td>28</td>
<td>7 + 1</td>
<td>6400</td>
</tr>
<tr>
<td>МАЗ и аналоги</td>
<td>до 10</td>
<td>до 45</td>
<td>1000</td>
<td>32</td>
<td>7 + 1</td>
<td>8000</td>
</tr>
<tr>
<td rowspan="2">Еврофура и аналоги</td>
<td>до 15</td>
<td>до 50</td>
...
CSS
table tbody {
background-color: #e8e8e8;
text-align:-webkit-center;
text-align:center;
}
table th {
padding: 0.5em 0.5em 0.375em;
border: 1px solid white;
font-weight: 900;
}
table thead {
background-color: #668dc6;
text-align:center;
text-align:-webkit-center;
color: #f5f5f5;
}
table td {
border: 1px solid white;
}
table tbody td:first-child, table thead th:first-child {
position:fixed;
width: 30%;
white-space: normal;
}