Если вы не знаете, как можно легко создать адаптивную таблицу, то этот материал для вас, так как таблицу, которую здесь будем создавать, то она изначально станет менять свой дизайн под мобильные экраны, что все выглядело корректно.
Где изначально расположение ячеек на узких экранах будет см отрется спасительно, но совершенно в другой форме, а точнее вертикальной, хотя по умолчанию на широком мониторе мы наблюдаем горизонтальное положение.
Это универсальный материал, что отлично подойдет для любого объема текста.
При открытие на большом размере монитора:
Здесь уже наблюдаем с мобильного гаджет:
Установка:
HTML
Код
<table class="kolenudya-netablatsy">
<thead>
<tr>
<th>Название команды 1</th>
<th>Название команды 2</th>
<th>Название команды 3</th>
<th>Название команды 4</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>Название команды 1</span>Краткое описание 1</td>
<td><span>Название команды 2</span>Краткое описание 1</td>
<td><span>Название команды 3</span>Краткое описание 1</td>
<td><span>Название команды 4</span>Краткое описание 1</td>
</tr>
<!-- Еще строки -->
<tr>
<td><span>Название команды 1</span>Краткое описание 5</td>
<td><span>Название команды 2</span>Краткое описание 5</td>
<td><span>Название команды 3</span>Краткое описание 5</td>
<td><span>Название команды 4</span>Краткое описание 5</td>
</tr>
</tbody>
</table>
CSS
Код
.kolenudya-netablatsy {
border-radius: 5px;
font-weight: normal;
border: none;
border-collapse: collapse;
width: 100%;
max-width: 100%;
}
.kolenudya-netablatsy th, .kolenudya-netablatsy td {
padding: 10px 20px;
font-size: 13px;
border: none;
font-family: Verdana, sans-serif;
border: 1px solid #266ba7;
vertical-align: top;
}
.kolenudya-netablatsy th {
color: #efefef;
background: #205b8e;
font-weight: bold;
border: 1px solid #b9daf5;
text-transform: uppercase;
text-align: center;
}
.kolenudya-netablatsy tr:nth-child(even) {
background: #deecf7;
}
.kolenudya-netablatsy td span {
background: #337AB7;
color: #f7f8f9;
display: none;
font-size: 11px;
font-weight: bold;
font-family: Verdana, sans-serif;
text-transform: uppercase;
padding: 5px 10px;
position: absolute;
top: 0;
left: 0;
}
@media(max-width: 768px) {
.kolenudya-netablatsy thead {
display: none;
}
.kolenudya-netablatsy tr {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 30px;
}
.kolenudya-netablatsy td {
margin: 0 -1px -1px 0;
padding-top: 35px;
position: relative;
width: 50%;
}
.kolenudya-netablatsy td span {
display: block;
}
}
@media(max-width: 480px) {
.kolenudya-netablatsy td {
width: 100%;
}
}
Обратите внимание, что заголовок таблицы дублируется, это происходит в каждой ячейки в теге span. Все сделано для того, чтоб все отлично отображалось на узких экранах.
Демонстрация
