Table

table verstka

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>
			<tr class="line_tr"></tr>
			<tfoot>
			<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">Бензин</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">Автомобиль японской<br> сборки, замена коробки</div></td>
				<td><a href="#" class="fix"><img src="https://wordassociations.net/image/600x/svg_to_png/Anonymous_Pencil_icon.png" alt=""></a></td>
				<td><a href="#" class="clear"><img src="https://img2.freepng.ru/20180711/wru/kisspng-computer-icons-clip-art-delete-image-icon-5b45dc96b07912.1758854315313051107228.jpg" alt=""></a></td>
			</tr>
			<tr class="garage-row__3">
				<td><a href="#" class="search-catalog">Поиск в каталоге</a></td>
				<td colspan="11" class="notebook_td"><a href="#" class="notebook">Блокнот</a></td>
			</tr>
			</tfoot>
		</table>

CSS

.garage-table {
  width: 100%;
  margin-top: 15px;
  text-align: left;
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  border-collapse: collapse;
  border-spacing: 0;
}

.garage-table tr td,

th {
  padding-left: 15px;
}

tr.garage-row__1 {
  background: #2aabef;
  height: 40px;
}

tr.garage-row__1 th:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

tr.garage-row__1 th:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

tr.line_tr {
  display: block;
  height: 0;
  margin: 20px 0;
}

tr.garage-row__2 {
  height: 45px;
  background: #fff;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

tr.garage-row__3 {
  background: #fff;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

tr.garage-row__2 .fix,
.clear {
  display: inline-block;
  position: relative;
  top: 10px;
  width: 32px;
  height: 30px;
}

.garage-width {
  max-width: 180px;
}

td.garage-row__koment {
  text-align: left;
}

tfoot td .notebook,
.search-catalog {
  color: #0972aa;
  display: inline-block;
  padding-bottom: 5px;
}
.fix img {
  width: 25px;
}

.clear img {
  width: 25px;
}