Display table with highlighted cells

HTML

<table>
  <tr>
    <th>Small</th>
    <th class="highlight">
      <div class="recommendation-label">Empfohlen</div><br>Medium
    </th>
    <th>Large</th>
  </tr>
  <tr>
    <td>€9,99/Monat</td>
    <td class="highlight">€19,99/Monat</td>
    <td>€29,99/Monat</td>
  </tr>
  <tr>
    <td>10 GB</td>
    <td class="highlight">100 GB</td>
    <td>1 TB</td>
  </tr>
  <tr>
    <td>E-Mail</td>
    <td class="highlight">Telefon & E-Mail</td>
    <td>24/7 Premium Support</td>
  </tr>
</table>

CSS

table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
      font-family: Arial, sans-serif;
    }

    th, td {
      border: 1px solid #ccc;
      padding: 15px;
    }

    th {
      background-color: #f4f4f4;
    }

    .highlight {
      background-color: #e0f7fa;
      border: 2px solid #00acc1;
      font-weight: bold;
    }

    .recommendation-label {
      display: inline-block;
      background-color: #00acc1;
      color: white;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 0.85em;
      margin-bottom: 8px;
    }