<section class="random-table">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Last name</th>
        <th>Description</th>
        <th>5 years</th>
        <th>Likes</th>
        <th>Dislikes</th>
        <th>Score on test</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Maisey</th>
        <td>Lawrence</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
        <td>2 years</td>
        <td>Chocolate</td>
        <td>Papaya</td>
        <td>B+</td>
      </tr>
      <tr>
        <th>Harris</th>
        <td>Hood</td>
        <td>In hac habitasse platea dictumst.</td>
        <td>8 years</td>
        <td>Spaghetti</td>
        <td>Waffles</td>
        <td>A</td>
      </tr>
      <tr>
        <th>Riya</th>
        <td>Santiago</td>
        <td>Proin tincidunt, eros sit amet malesuada interdum, ex dui semper lectus.</td>
        <td>10 years</td>
        <td>Hamburger</td>
        <td>Stew</td>
        <td>A+</td>
      </tr>
      <tr>
        <th>Brian</th>
        <td>Mcgee</td>
        <td>Proin id diam et ipsum pharetra fermentum eget quis leo.</td>
        <td>7 years</td>
        <td>Hamburger</td>
        <td>Fish</td>
        <td>C</td>
      </tr>
      <tr>
        <th>Yunus</th>
        <td>Garrison</td>
        <td>Nulla quam est, iaculis commodo lorem et, mollis molestie tellus</td>
        <td>4 years</td>
        <td>Pizza</td>
        <td>Carrots</td>
        <td>B-</td>
      </tr>
      <tr>
        <th>Shane</th>
        <td>Hurst</td>
        <td>Sed vitae dolor ut nisi tempor pretium ut interdum mauris.</td>
        <td>1 year</td>
        <td>French fries</td>
        <td>Tomatoes</td>
        <td>B+</td>
      </tr>
    </tbody>
  </table>
</section>

<section class="random-table">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Last name</th>
        <th>Description</th>
        <th>5 years</th>
        <th>Likes</th>
        <th>Dislikes</th>
        <th>Score on test</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Maisey</th>
        <th>Lawrence</th>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
        <td>2 years</td>
        <td>Chocolate</td>
        <td>Papaya</td>
        <td>B+</td>
      </tr>
      <tr>
        <th>Harris</th>
        <th>Hood</th>
        <td>In hac habitasse platea dictumst.</td>
        <td>8 years</td>
        <td>Spaghetti</td>
        <td>Waffles</td>
        <td>A</td>
      </tr>
      <tr>
        <th>Riya</th>
        <th>Santiago</th>
        <td>Proin tincidunt, eros sit amet malesuada interdum, ex dui semper lectus.</td>
        <td>10 years</td>
        <td>Hamburger</td>
        <td>Stew</td>
        <td>A+</td>
      </tr>
      <tr>
        <th>Brian</th>
        <th>Mcgee</th>
        <td>Proin id diam et ipsum pharetra fermentum eget quis leo.</td>
        <td>7 years</td>
        <td>Hamburger</td>
        <td>Fish</td>
        <td>C</td>
      </tr>
      <tr>
        <th>Yunus</th>
        <th>Garrison</th>
        <td>Nulla quam est, iaculis commodo lorem et, mollis molestie tellus</td>
        <td>4 years</td>
        <td>Pizza</td>
        <td>Carrots</td>
        <td>B-</td>
      </tr>
      <tr>
        <th>Shane</th>
        <th>Hurst</th>
        <td>Sed vitae dolor ut nisi tempor pretium ut interdum mauris.</td>
        <td>1 year</td>
        <td>French fries</td>
        <td>Tomatoes</td>
        <td>B+</td>
      </tr>
    </tbody>
  </table>
</section>

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

:root {
  --table-borders: #dadada;
}

thead th:first-of-type {
  border-right-width: 4px;
}

tbody th:last-of-type {
  border-right-width: 4px;
}

thead:has(+tbody th:nth-child(2)) th:nth-child(2) {
  border-right-width: 4px;
}

thead:has(+tbody th:nth-child(2)) th:nth-child(1) {
  border-right-width: 1px;
}

.random-table {
  max-width: 90vw;
  overflow-x: auto;
  background: #FFF;
  padding: 20px;
  border-radius: 10px;
  margin-block: 40px;
}

table {
  white-space: nowrap;
  text-align: left;
  border-top: 1px solid var(--table-borders);
  border-left: 1px solid var(--table-borders);
  margin: 0;
  padding: 0;
}

th, td {
  padding: 15px;
  border-bottom : 1px solid var(--table-borders);
  border-right: 1px solid var(--table-borders);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Lato', sans-serif;
  background: #A2C7E5;
}