/* Style dla wszystkich urządzeń. */ 
table { border-collapse: collapse; } 
/* Style dla małych urządzeń. */  
@media (max-width:720px){
  table { border: none; }
  /* Wyświetlenie całej tabeli jako bloku. */
  table, thead, tbody, th, td, tr { display: block; }
  /* Ukrycie nagłówków. */
  thead tr { position: absolute; top: -9999px; left: -9999px; }
  tr { border: 1px solid #ccc; margin-bottom: 1em; }
  tr:nth-of-type(odd) { background: #eee; }
  td {
    /* Zachowanie naśladujące "wiersz". */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 20%;
  }
  td:before {
    /* Teraz podobnie jak nagłówek tabeli. */
    position: absolute;
    /* Wartości top i left odpowiadają wartościom dopełnienia. */
    top: 1px;
    left: 2px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
  /* Etykiety dla danych. */
  td:nth-of-type(1):before { content: "Nazwa "; }
  td:nth-of-type(2):before { content: "URL "; }
  td:nth-of-type(3):before { content: "RWD? " ; }
  td:nth-of-type(4):before { content: "Win "; } 
  td:nth-of-type(5):before { content: "Mac "; } 
} 
/* Style dla większych urządzeń. */ 
@media (min-width:721px) {
  tr:nth-child(2n+1) { background-color: #80C5F5; }
  table thead tr:nth-child(n) { background-color: #3d447e; color: #dfdfdf; }
}
