<table>
<thead>
<tr>
<th>Разрешения</th>
<th>декабрь 2016 г.</th>
<th>ноябрь 2016 г.</th>
<th>в среднем за 3 месяца</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Разрешения">1366x768</td>
<td data-label="декабрь 2016 г.">12.8%</td>
<td data-label="ноябрь 2016 г.">13.1%</td>
<td data-label="в среднем за 3 месяца">13.0%</td>
</tr>
<tr>
<td data-label="Разрешения">640x480</td>
<td data-label="декабрь 2016 г.">12.7%</td>
<td data-label="ноябрь 2016 г.">12.5%</td>
<td data-label="в среднем за 3 месяца">12.5%</td>
</tr>
<tr>
<td data-label="Разрешения">1920x1080</td>
<td data-label="декабрь 2016 г.">5.6%</td>
<td data-label="ноябрь 2016 г.">5.8%</td>
<td data-label="в среднем за 3 месяца">5.8%</td>
</tr>
<tr>
<td data-label="Разрешения">1024x768</td>
<td data-label="декабрь 2016 г.">5.3%</td>
<td data-label="ноябрь 2016 г.">5.5%</td>
<td data-label="в среднем за 3 месяца">5.5%</td>
</tr>
</tbody>
</table>table {
border: 1px solid #000;
border-collapse: collapse;
width: 100%;
}
th {
background-color: #e7e7e7;
}
th,
td {
padding: 10px;
border: 1px solid #000;
}
@media (max-width: 567px) {
table, tr, td, tbody {
display: block; /* делаем элементы таблицы блочными */
}
thead {
display: none; /* скрываем заголовки */
}
tr {
border-bottom: 1px solid #000; /* разделитель между группами данных */
}
td {
/* разделитель между свойствами */
border-color: #ccc;
border-width: 0 0 1px 0;
overflow: hidden; /* для сброса флоатов */
}
td:before {
content: attr(data-label); /* получаем название свойства из атрибута */
float: left;
width: 50%;
background-color: #e7e7e7;
/* магия отступов, внешними вычитаем отступ ячейки, внутренними приравниваемся к нему, также делаем отступ от значения справа */
margin: -10px 10px -10px -10px;
padding: 10px 0 10px 10px;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.