Адаптивная таблица для сайта

Если у вас адаптивный шаблон сайта то обязательно понадобится адаптивная таблица для сайта. Один из возможных вариантов стиля для такой таблицы приведен ниже.

№	First name	Surname	Date of birth	Relationship
1	Steve	Foo	01/01/1978	Policyholder
2	Steffie	Foo	01/01/1978	Spouse
3	Stan	Foo	01/01/1994	Son
4	Stella	Foo	01/01/1992	Daughter

Для создания такой таблицы понадобится стилевой файл:

.responstable {
 margin: 1em 0;
 width: 100%;
 overflow: hidden;
 background: #FFF;
 color: #024457;
 border-radius: 0px;
 border: 1px solid #167F92;
 text-align: center;
}
.responstable tr {
 border: 1px solid #D9E4E6;
}
.responstable tr:nth-child(odd) {
 background-color: #EAF3F3;
}
.responstable th {
 display: none;
 border: 1px solid #D9E4E6;
 background-color: #cecece;
 color: #FFF;
 padding: 1em;

}
.responstable th:first-child {
 display: table-cell;
 text-align: center;
}
.responstable th:nth-child(2) {
 display: table-cell;
}
.responstable th:nth-child(2) span {
 display: none;
}
.responstable th:nth-child(2):after {
 content: attr(data-th);
}
@media (min-width: 480px) {
 .responstable th:nth-child(2) span {
 display: block;
 }
 .responstable th:nth-child(2):after {
 display: none;
 }
}
.responstable td {
 display: block;
 word-wrap: break-word;
 max-width: 7em;
 
}
.responstable td:first-child {
 display: table-cell;
 text-align: center;
 border-right: 1px solid #D9E4E6;
}
@media (min-width: 480px) {
 .responstable td {
 border: 1px solid #D9E4E6;
 }
}
.responstable th, .responstable td {
 text-align:center;
 margin: .5em 1em;
}
@media (min-width: 480px) {
 .responstable th, .responstable td {
 display: table-cell;
 padding: 1em;
 }
}

А также код (фрагмент) самой таблицы:
<table class="responstable"> <tr> <th>№</th> <th data-th="Driver details"><span>First name</span></th> <th>Surname</th> <th>Date of birth</th> <th>Relationship</th> </tr> <tr> <td>1</td> <td>Steve</td> <td>Foo</td> <td>01/01/1978</td> <td>Policyholder</td> </tr> <tr> <td>2</td> <td>Steffie</td> <td>Foo</td> <td>01/01/1978</td> <td>Spouse</td> </tr> </table>