Как сверстать таблицу с кнопкой в каждой строке?

Question

[oksana_melikhova]

Дана такая таблица. Как сделать так, чтобы колонки и кнопка выглядели адекватно?

Код:

<table class="advantages__table">
						<caption class="advantages__table-title title-2">VMI on GPU Instances</caption>
						<thead>
							<tr>
								<th>Instance name</th>
								<th>GPU</th>
								<th>vCPU</th>
								<th>RAM,Gb</th>
								<th>Storage NVMe EBS,Gb</th>
								<th>Ethernet throughput, Gb/s</th>
								<th>EBS throughput, Mbit/s</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>K80_1.4</td>
								<td>1</td>
								<td>4</td>
								<td>61</td>
								<td>100</td>
								<td>10</td>
								<td>1500</td>
							</tr>
							<tr>
								<td>K80_8.32</td>
								<td>8</td>
								<td>32</td>
								<td>488</td>
								<td>200</td>
								<td>10</td>
								<td>4500</td>
							</tr>
							<tr>
								<td>K80_16.64</td>
								<td>16</td>
								<td>64</td>
								<td>732</td>
								<td>500</td>
								<td>25</td>
								<td>7000</td>
							</tr>
						</tbody>
					</table>

.advantages__table{
	width: 100%;
	margin-bottom: 20px;
	border: 5px solid #fff;
	border-top: 5px solid #fff;
	border-bottom: 3px solid #fff;
	border-collapse: collapse; 
	font-size: 15px;
}

.advantages__table-title {
	color: var(--gray);
	margin: 50px 0 30px 0;
}

.advantages__table th {
	font-weight: bold;
	padding: 7px;
	border: none;
	text-align: center;
	font-size: 15px;
	border-top: 3px solid #fff;
}

.advantages__table td{
	text-align: center;
	padding: 7px;
	border: none;
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff;
	font-size: 15px;
}

.advantages__table tbody tr:nth-child(1){
	background: var(--green);
}
.advantages__table tbody tr:nth-child(2){
	background: var(--white);
}
.advantages__table tbody tr:nth-child(3){
	background: rgb(225, 236, 228);
}

Comments

[Михаил Р.]

Как сделать так, чтобы колонки и кнопка выглядели адекватно?

Адекватность чем измеряется?

Answer 1

[Сергей delphinpro]

А в чем сложность?

Comments

[oksana_melikhova]

В адаптиве сложность)
У меня мозг сломался на том, как сделать адаптив данной таблицы с кнопкой

[Сергей delphinpro]

oksana_melikhova, обновил ответ

[oksana_melikhova]

Сергей delphinpro, Большое спасибо! Хоть поняла, как такое верстать)