Есть ли способ в CSS складывать весь столбец, чтобы моя таблица рабочего стола была следующей:
| H1 | H2 | H3 | H4 |
| A1 | B1 | C1 | D1 |
| A2 | B2 | C2 | D2 |
Для мобильных устройств это превратится в:
| H1 |
| A1 |
| A2 |
| H2 |
| B1 |
| B2 |
| H3 |
| C1 |
| C2 |
| H4 |
| D1 |
| D2 |
Я надеюсь в этом есть смысл
Вот моя html-структура:
<table class="rds-table">
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
</table>.column {
float:left;
}
.element {
display: block;
float:left;
clear:both;
}
@media (max-width: 980px) {
.column {
clear:both;
}
}
<div class="rds-table">
<div class="column">
<div class="element">Header One</div>
<div class="element">Data One</div>
<div class="element">Data One</div>
</div>
<div class="column">
<div class="element">Header Two</div>
<div class="element">Data Two</div>
<div class="element">Data Two</div>
</div>
</div>
Медиа-запрос будет искать размер экрана 980 или меньше. Изменить: теперь обновлен код, он будет использовать div вместо элементов таблицы.
Эта статья взята из Интернета, укажите источник при перепечатке.
Если есть какие-либо нарушения, пожалуйста, свяжитесь с[email protected] Удалить.
я говорю два предложения