<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>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Instance name">K80_1.4</td>
<td data-title="GPU">1</td>
<td data-title="vCPU">4</td>
<td data-title="RAM,Gb">61</td>
<td data-title="Storage NVMe EBS,Gb">100</td>
<td data-title="Ethernet throughput, Gb/s">10</td>
<td data-title="EBS throughput, Mbit/s">1500</td>
<td>
<button>Запросить цену</button>
</td>
</tr>
<tr>
<td data-title="Instance name">K80_8.32</td>
<td data-title="GPU">8</td>
<td data-title="vCPU">32</td>
<td data-title="RAM,Gb">488</td>
<td data-title="Storage NVMe EBS,Gb">200</td>
<td data-title="Ethernet throughput, Gb/s">10</td>
<td data-title="EBS throughput, Mbit/s">4500</td>
<td>
<button>Запросить цену</button>
</td>
</tr>
<tr>
<td data-title="Instance name">K80_16.64</td>
<td data-title="GPU">16</td>
<td data-title="vCPU">64</td>
<td data-title="RAM,Gb">732</td>
<td data-title="Storage NVMe EBS,Gb">500</td>
<td data-title="Ethernet throughput, Gb/s">25</td>
<td data-title="EBS throughput, Mbit/s">7000</td>
<td>
<button>Запросить цену</button>
</td>
</tr>
</tbody>
</table>
.advantages__table {
--green: #219652;
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: 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(odd) td {
background: #ccc;
}
.advantages__table tbody tr:hover td {
--button-bg: var(--green);
--button-color: white;
background: var(--green);
color: white;
}
.advantages__table tbody tr td:last-child {
background: none;
}
button {
color: var(--button-color, var(--green));
border: 2px solid var(--green);
background: var(--button-bg, white);
}
@media (max-width: 500px) {
.advantages__table {
border-spacing: 0;
}
.advantages__table,
.advantages__table tbody,
.advantages__table tr,
.advantages__table td,
.advantages__table caption {
display: block;
}
.advantages__table thead {
display: none;
}
.advantages__table td {
text-align: left;
padding: 0;
}
.advantages__table td[data-title]:before {
content: attr(data-title) ": ";
font-weight: bold;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.