Кодинг
★ Рубрика: Кодинг
★ Тема: CSS

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

Если у вас адаптивный шаблон сайта то обязательно понадобится адаптивная таблица для сайта. Один из возможных вариантов стиля для такой таблицы приведен ниже.
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;
 }
}
А также код (фрагмент) самой таблицы:
 Похожие публикации: CSS

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]