table in RWD

by tomik23

HTML

<section class="reservation-box">
   <table class="table-reservation">
     <thead>
       <tr>
         <th>Nazwisko i imię</th>
         <th>Telefon</th>
         <th>Adres e-mail</th>
         <th>Liczba wizyt</th>
         <th>Data ostatniej rezerwacji</th>
       </tr>
     </thead>
     <tbody>
       <tr class="reservation-row-item">
         <td data-title="Nazwisko i imię">Pałczyński stefan</td>
         <td data-title="Telefon">14725836</td>
         <td data-title="Adres e-mail">[email protected]</td>
         <td data-title="Liczba wizyt">0</td>
         <td data-title="Data ostatniej rezerwacji">nie odbyła się</td>
       </tr>
       <tr class="reservation-row-item">
         <td data-title="Nazwisko i imię">Miałczyński Cezary</td>
         <td data-title="Telefon">69522999</td>
         <td data-title="Adres e-mail">[email protected]</td>
         <td data-title="Liczba wizyt">1</td>
         <td data-title="Data ostatniej rezerwacji">28 stycznia 2014</td>
       </tr>
       <tr class="reservation-row-item">
         <td data-title="Nazwisko i imię">Tomaczek Andrzej</td>
         <td data-title="Telefon">32999222</td>
         <td data-title="Adres e-mail">[email protected]</td>
         <td data-title="Liczba wizyt">1</td>
         <td data-title="Data ostatniej rezerwacji">20 stycznia 2015</td>
       </tr>
     </tbody>
   </table>
 </section>

SCSS

body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji,
    Segoe UI Emoji;
  font-size: 14px;
  line-height: 1.8;
  color: #24292e;
  background-color: #fff;
}

.reservation-box {
  table {
    width: 100%;
    border: 1px solid #e7e7e7;
    border-collapse: collapse;
    border-spacing: 0;

    thead {
      text-align: left;
      background-color: #f8f8f8;
      font-size: 13px;
      border-bottom: 1px solid #e7e7e7;
    }

    td,
    th {
      padding: 7px;
    }

    [data-title] {
      border-bottom: 1px solid #e7e7e7;
    }
  }
}

@media (max-width: 768px) {
  .reservation-box {
    table {
      font-size: 0.8rem;
    }

    thead {
      display: none;
    }

    td {
      display: block;
      border: none;
      position: relative;
      padding-left: 39% !important;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    tr {
      border-bottom: 2px solid #a3a3a3;
      width: 100%;

      [data-title] {
        border-bottom: 1px solid #e7e7e7;
      }

      &.reservation-row-item {
        td {
          &:before {
            position: absolute;
            font-size: 0.8rem;
            top: 0;
            left: 0;
            width: 31%;
            padding: 8px 8px 8px 10px;
            text-align: left;
            font-weight: bold;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            content: attr(data-title);
            border-right: 1px solid #e7e7e7;
          }
        }
      }
    }
  }
}