JSFiddle - React, Tailwind, and code Playground

by stic_k

HTML

<table class="garage-table">
			<thead>
			<tr class="garage-row__1">
				<th>Марка</th>
				<th>Модель</th>
				<th>VIN-номер</th>
				<th>КПП</th>
				<th>Год</th>
				<th>Двигатель</th>
				<th>Л/с</th>
				<th>Объём дв</th>
				<th>Кузов</th>
				<th colspan="3" class="garage-row__koment"> Коментарии</th>
			</tr>
			</thead>
			<tbody>
			<tr class="garage-row__2">
				<td><div class="mark">Honda</div></td>
				<td><div class="model">civik</div></td>
				<td><div class="vin">JHMES56905S20006</div></td>
				<td><div class="kpp">Автомат</div></td>
				<td><div class="year">2005</div></td>
				<td><div class="dwigatel">2005</div></td>
				<td><div class="lc">110</div></td>
				<td><div class="obyom">1.6</div></td>
				<td><div class="cuzov">Седан</div></td>
				<td class="garage-width"><div class="koment">Автомобиль японской сборки, замена коробки</div></td>
				<td><a href="#" class="fix"><img src="img/img-1.png" alt="Картинка"></a></td>
				<td><a href="#" class="clear"><img src="img/img-2.png" alt="Картинка"></a></td>
			</tr>
			<tr>
				<td><a href="#" class="search-catalog">Поиск в каталоге</a></td>
				<td><a href="#" class="search-catalog">Блокнот</a></td>
			</tr>
			</tbody>
		</table>

CSS

.garage-table{
	width: 100%;
	margin-top: 15px;
  border-spacing: 0;
}
.garage-table td{
	text-align: center;
	border: 1px solid #222;
}
tr.garage-row__1{
	background: #2aabef;
}
tr.garage-row__2{
	height: 40px;
}
tr.garage-row__2{

}
.garage-width{
	max-width: 180px;
}
td.garage-row__koment{
	padding-left: 10px;
	text-align: left;
}