<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;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.