<table class="table">
    <thead class="table__head">
        <tr class="table__row">
            <th class="table__subtitle">Customer Name</th>
            <th class="table__subtitle">Company</th>
            <th class="table__subtitle">Phone Number</th>
            <th class="table__subtitle">Email</th>
            <th class="table__subtitle">Country</th>
            <th class="table__subtitle table__subtitle--status">Status</th>
        </tr>
    </thead>
    <tbody class="table__body">
        <tr class="table__row">
            <td class="table__item" data-label="Customer Name">Jane Cooper</td>
            <td class="table__item" data-label="Company">Microsoft</td>
            <td class="table__item" data-label="Phone Number">(225) 555-0118</td>
            <td class="table__item" data-label="Email">jane@microsoft.com</td>
            <td class="table__item" data-label="Country">United States</td>
            <td class="table__item" data-label="Status">
              <button class="table__btn table__btn--active">Active</button>
            </td>
          </tr>
        <tr class="table__row">
            <td class="table__item" data-label="Customer Name">Floyd Miles</td>
            <td class="table__item" data-label="Company">Yahoo</td>
            <td class="table__item" data-label="Phone Number">(205) 555-0100</td>
            <td class="table__item" data-label="Email">floyd@yahoo.com</td>
            <td class="table__item" data-label="Country">Kiribati</td>
            <td class="table__item" data-label="Status">
                <button class="table__btn table__btn--inactive">Inactive</button>
            </td>
        </tr>
        <tr class="table__row">
            <td class="table__item" data-label="Customer Name">Ronald Richards</td>
            <td class="table__item" data-label="Company">Adobe</td>
            <td class="table__item" data-label="Phone Number">(302) 555-0107</td>
            <td class="table__item" data-label="Email">ronald@adobe.com</td>
            <td class="table__item" data-label="Country">Israel</td>
            <td class="table__item" data-label="Status">
                <button class="table__btn table__btn--inactive">Inactive</button>
            </td>
        </tr>
        <tr class="table__row">
            <td class="table__item" data-label="Customer Name">Marvin McKinney</td>
            <td class="table__item" data-label="Company">Tesla</td>
            <td class="table__item" data-label="Phone Number">(252) 555-0126</td>
            <td class="table__item" data-label="Email">marvin@tesla.com</td>
            <td class="table__item" data-label="Country">Iran</td>
            <td class="table__item" data-label="Status">
                <button class="table__btn table__btn--active">Active</button>
            </td>
        </tr>
        <tr class="table__row">
            <td class="table__item" data-label="Customer Name">Jerome Bell</td>
            <td class="table__item" data-label="Company">Google</td>
            <td class="table__item" data-label="Phone Number">(629) 555-0129</td>
            <td class="table__item" data-label="Email">jerome@google.com</td>
            <td class="table__item" data-label="Country">Réunion</td>
            <td class="table__item" data-label="Status">
                <button class="table__btn table__btn--active">Active</button>
            </td>
        </tr>
        <tr class="table__row">
            <td class="table__item" data-label="Customer Name">Kathryn Murphy</td>
            <td class="table__item" data-label="Company">Microsoft</td>
            <td class="table__item" data-label="Phone Number">(406) 555-0120</td>
            <td class="table__item" data-label="Email">kathryn@microsoft.com</td>
            <td class="table__item" data-label="Country">Curaçao</td>
            <td class="table__item" data-label="Status">
                <button class="table__btn table__btn--active">Active</button>
            </td>
        </tr>
        <tr class="table__row">
            <td class="table__item" data-label="Customer Name">Jacob Jones</td>
            <td class="table__item" data-label="Company">Yahoo</td>
            <td class="table__item" data-label="Phone Number">(208) 555-0112</td>
            <td class="table__item" data-label="Email">jacob@yahoo.com</td>
            <td class="table__item" data-label="Country">Brazil</td>
            <td class="table__item" data-label="Status">
                <button class="table__btn table__btn--active">Active</button>
            </td>
        </tr>
        <tr class="table__row">
            <td class="table__item" data-label="Customer Name">Kristin Watson</td>
            <td class="table__item" data-label="Company">Facebook</td>
            <td class="table__item" data-label="Phone Number">(704) 555-0127</td>
            <td class="table__item" data-label="Email">kristin@facebook.com</td>
            <td class="table__item" data-label="Country">Åland Islands</td>
            <td class="table__item" data-label="Status">
                <button class="table__btn table__btn--inactive">Inactive</button>
            </td>
        </tr>
    </tbody>
    

    
</table>

.table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  margin-bottom: 32px;

  @media (max-width: 880px)t {
    display: block;
    overflow-x: auto;
    scrollbar-width: thin;
    white-space: nowrap;
  }

  thead,
  tbody {
    @media (max-width: 880px)t {
      display: block;
    }
  }
}


.table__subtitle {
  color: #b5b7c0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.14px;
  padding-bottom: 14px;
  text-align: left;

  @include tablet {
    padding: 15px;
  }

  &--status {
    text-align: center;
  }

  &:nth-child(1) {
    width: 19.4%;
  }

  &:nth-child(2) {
    width: 14.6%;
  }

  &:nth-child(3) {
    width: 17.8%;
  }

  &:nth-child(4) {
    width: 23.3%;
  }

  &:nth-child(5) {
    width: 16%;
  }

  
}

.table__item {
  color: #292d32;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.14px;
  padding: 19px 0;
  border-bottom: 1px solid #eee;

  @media (max-width: 880px) {
    padding: 15px;
  }
}

.table__btn {
  max-width: 80px;
  width: 100%;
  padding: 4px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid transparent;

  font-size: 14px;
  letter-spacing: -0.14px;

  margin: 0 auto;

  @media (max-width: 880px) {
    font-size: 12px;
  }

  &--active {
    border: 1px solid #00b087;
    background: rgba(22, 192, 152, 0.38);
    color: #008767;
  }

  &--inactive {
    border: 1px solid #df0404;
    background: #ffc5c5;
    color: #df0404;
  }
}

@media (max-width: 760px) {
  .table__row {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    thead .table__row{
      display: none;
    }


    .table__item {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
    }

    .table__item::before {
      content: attr(data-label);
      flex-basis: 50%;
      text-align: left;
      color: #b5b7c0;
      font-weight: 500;
    }

    .table__btn {
      margin: 0;
    }
  }