Я бы хотел транспонировать таблицу HTML без использования JS или другой таблицы.
У меня есть таблица с расписанием, которое я хочу свернуть в один столбец на мобильных экранах (мне нужно это , чтобы стать это ).
Сейчас у меня есть две таблицы, и я переключаю, какая из них отображается с помощью медиа-запросов (а также сворачивание строк в ячейки, как объяснено в этой статье ), но я бы хотел лучшерешение, потому что каждое редактирование потребует изменения обеих таблиц.
Можно ли это сделать без использования JavaScript?
.styled-table {
margin: 0 auto;
padding: 0;
width: 100%;
}
.styled-table thead, .styled-table tbody {
text-align: center;
}
.styled-table th {
font-weight: normal;
background-color: #C00;
color: white;
}
.styled-table tr:nth-child(even) {
background: #CCC0C0;
}
.styled-table th {
border-top: 1px solid #C00;
border-bottom: 1px solid #C00;
}
.styled-table th:first-child {
border-left: 1px solid #C00;
}
.styled-table th:last-child {
border-right: 1px solid #C00;
}
@media screen and (min-width: 769px) {
.styled-table td + td,
.styled-table th + th,
.styled-table th + td {
border-left: 1px solid black;
}
.display-sm {
display: none;
}
}
@media screen and (max-width: 768px) {
/* Force table to not be like tables anymore */
table.styled-table,
.styled-table thead,
.styled-table tbody,
.styled-table th,
.styled-table td,
.styled-table tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.styled-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.styled-table tr {
border-bottom: 1px solid black;
}
.styled-table td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding: 5px;
padding-left: 50%;
}
.styled-table td:before {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
content: attr(data-mobile-label);
font-weight: normal;
font-style: normal;
background-color: #C00;
color: white;
border-right: 1px solid black;
}
.styled-table th {
border-bottom: 1px solid black;
}
.hide-sm {
display: none !important;
}
}
<table class="styled-table hide-sm">
<thead>
<tr>
<th>Time/Day</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<tr>
<th>
8:45 AM
to
1:00 PM
</th>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
</tr>
<tr>
<th>
1:00 PM
to
5:00 PM
</th>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
</tr>
<tr>
<th>
5:00 PM
to
9:00 PM
</th>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
<td>
Name <br>
Name <br>
Name <br>
</td>
</tr>
</tbody>
</table>
<table class="styled-table display-sm">
<thead>
<tr>
<th>Time/Day</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<tr>
<th>Mon</th>
<td data-mobile-label="8:45 AM to 1:00 PM">
Name <br>
Name <br>
Name <br>
</td>
<td data-mobile-label="1:00 PM to 5:00 PM">
Name <br>
Name <br>
Name <br>
</td>
<td data-mobile-label="5:00 PM to 9:00 PM">
Name <br>
Name <br>
Name <br>
</td>
</tr>
<tr>
<th>Tues</th>
<td data-mobile-label="8:45 AM to 1:00 PM">
Name <br>
Name <br>
Name <br>
</td>
<td data-mobile-label="1:00 PM to 5:00 PM">
Name <br>
Name <br>
Name <br>
</td>
<td data-mobile-label="5:00 PM to 9:00 PM">
Name <br>
Name <br>
Name <br>
</td>
</tr>
<tr>
<th>Wed</th>
<td data-mobile-label="8:45 AM to 1:00 PM">
Name <br>
Name <br>
Name <br>
</td>
<td data-mobile-label="1:00 PM to 5:00 PM">
Name <br>
Name <br>
Name <br>
</td>
<td data-mobile-label="5:00 PM to 9:00 PM">
Name <br>
Name <br>
Name <br>
</td>
</tr>
<tr>
<th>Thurs</th>
<td data-mobile-label="8:45 AM to 1:00 PM">
Name <br>
Name <br>
Name <br>
</td>
<td data-mobile-label="1:00 PM to 5:00 PM">
Name <br>
Name <br>
Name <br>
</td>
<td data-mobile-label="5:00 PM to 9:00 PM">
Name <br>
Name <br>
Name <br>
</td>
</tr>
<tr>
<th>Fri</th>
<td data-mobile-label="8:45 AM to 1:00 PM">
Name <br>
Name <br>
Name <br>
</td>
<td data-mobile-label="1:00 PM to 5:00 PM">
Name <br>
Name <br>
Name <br>
</td>
<td data-mobile-label="5:00 PM to 9:00 PM">
Name <br>
Name <br>
Name <br>
</td>
</tr>
<tr>
<th>Sat</th>
<td data-mobile-label="8:45 AM to 1:00 PM">
Name <br>
Name <br>
Name <br>
</td>
<td data-mobile-label="1:00 PM to 5:00 PM">
Name <br>
Name <br>
Name <br>
</td>
<td data-mobile-label="5:00 PM to 9:00 PM">
Name <br>
Name <br>
Name <br>
</td>
</tr>
</tbody>
</table>