Responsive table

by John Doe

HTML

<table class="resp-table">
      <thead>
        <tr>
          <th>Termék</th>
          <th>Biztosító</th>
          <th>Státusz</th>
          <th>Ajánlatszám</th>
          <th>Dátum</th>
          <th>Dokumentum(ok)</th>
          <th>Művelet</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-th="Termék">KGFB</td>
          <td data-th="Biztosító">Wáberer</td>
          <td data-th="Státusz">Lezárt</td>
          <td data-th="Ajánlatszám">7500005515</td>
          <td data-th="Dátum">2019.02.22.</td>
          <td data-th="Dokumentumok">
            <a href="#" class="bttn pdf-down">Megbizatási szerződés</a>
            <a href="#" class="bttn pdf-down">Biztosításközvetítői javaslat</a>
            <a href="#" class="bttn pdf-down">Igényfelmérő dokumentum</a>
            <a href="#" class="bttn pdf-down">KGFB ajánlat</a>
            <a href="#" class="bttn pdf-down">KGFB_termékismertető</a>
            <a href="#" class="bttn pdf-down">Waberer_kgfb_20180223</a>
            <a href="#" class="bttn pdf-down">Ügyféltájékoztató_20180223</a>
          </td>
          <td data-th="Művelet"><a href="#" class="btttn">xml</a></td>
        </tr>
        <tr>
          <td data-th="Termék">Uniqa</td>
          <td data-th="Biztosító">"Comedy"</td>
          <td data-th="Státusz">Lezárt</td>
          <td data-th="Ajánlatszám">7500005516</td>
          <td data-th="Dátum">2019.02.22.</td>
          <td data-th="Dokumentumok">
            <a href="#" class="bttn pdf-down">Megbizatási szerződés</a>
            <a href="#" class="bttn pdf-down">Biztosításközvetítői javaslat</a>
            <a href="#" class="bttn pdf-down">Igényfelmérő dokumentum</a>
            <a href="#" class="bttn pdf-down">KGFB ajánlat</a>
            <a href="#" class="bttn pdf-down">KGFB_termékismertető</a>
            <a href="#" class="bttn pdf-down">Waberer_kgfb_20180223</a>
            <a href="#" class="bttn pdf-down">Ügyféltájékoztató_20180223</a>
          </td>
...

CSS

@import "http://fonts.googleapis.com/css?family=Montserrat:300,400,700";
.resp-table {
  margin: 1em 0;
  min-width: 300px;
}
.resp-table tr {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.resp-table th {
  display: none;
}
.resp-table td {
  display: block;
}
.resp-table td:first-child {
  padding-top: .5em;
}
.resp-table td:last-child {
  padding-bottom: .5em;
}
.resp-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
}
@media (min-width: 480px) {
  .resp-table td:before {
    display: none;
  }
}
.resp-table th, .resp-table td {
  text-align: left;
}
@media (min-width: 720px) {
  .resp-table th, .resp-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .resp-table th:first-child, .resp-table td:first-child {
    padding-left: 0;
  }
  .resp-table th:last-child, .resp-table td:last-child {
    padding-right: 0;
  }
}

body {
  padding: 0 2em;
  font-family: Montserrat, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #444;
  background: #eee;
}

h1 {
  font-weight: normal;
  letter-spacing: -1px;
  color: #34495E;
}

.resp-table {
  background: #34495E;
  color: #fff;
  overflow: hidden;
}

.resp-table tr {
  border-color: #46627f;
}
.resp-table th, .resp-table td {
  margin: .5em 1em;
}
@media (min-width: 720px) {
  .resp-table th, .resp-table td {
    padding: 1em !important;
  }
}
.resp-table th, .resp-table td:before {
  color: #dd5;
}