<h2>Tworzenie responsywnych tabel</h2>

<table>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
      <th>Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span>Company</span> Alfreds Futterkiste</td>
      <td><span>Contact</span> Maria Anders</td>
      <td><span>Country</span> Germany</td>
      <td><span>Year</span> 2012</td>
    </tr>
    <tr>
      <td><span>Company</span> Centro comercial Moctezuma</td>
      <td><span>Contact</span> Francisco Chang</td>
      <td><span>Country</span> Mexico</td>
      <td><span>Year</span> 2014</td>
    </tr>
    <tr>
      <td><span>Company</span> Ernst Handel</td>
      <td><span>Contact</span> Roland Mendel</td>
      <td><span>Country</span> Austria</td>
      <td><span>Year</span> 2016</td>
    </tr>
    <tr>
      <td><span>Company</span> Island Trading</td>
      <td><span>Contact</span> Helen Bennett</td>
      <td><span>Country</span> UK</td>
      <td><span>Year</span> 2018</td>
    </tr>
    <tr>
      <td><span>Company</span> Laughing Bacchus Winecellars</td>
      <td><span>Contact</span> Yoshi Tannamuri</td>
      <td><span>Country</span> Canada</td>
      <td><span>Year</span> 2019</td>
    </tr>
  </tbody>
</table>
@import url("https://fonts.googleapis.com/css?family=Lato:400,700&display=swap&subset=latin-ext");
* {
  box-sizing: border-box;
  font-family: "Lato", "Helvetica", sans-serif;
}
table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;

  thead {
    @media (max-width: 800px) {
      left: -9999px;
      position: absolute;
      visibility: hidden;
    }
  }

  tr {
    background: white;
    border-bottom: 1px solid;

    @media (max-width: 800px) {
      border-bottom: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 40px;
    }
    th,
    td {
      padding: 10px 20px;
    }
    td {
      @media (max-width: 800px) {
        border: 1px solid;
        margin: 0 -1px -1px 0;
        padding-top: 35px;
        position: relative;
        width: 50%;
      }
    }

    span {
      background: #eee;
      color: dimgrey;
      display: none;
      font-size: 10px;
      font-weight: bold;
      padding: 5px;
      position: absolute;
      text-transform: uppercase;
      top: 0;
      left: 0;
      @media (max-width: 800px) {
        display: block;
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.