如何堆叠表格列以模拟日历议程视图? [英] How to stack table columns to simulate calendar agenda view?
本文介绍了如何堆叠表格列以模拟日历议程视图?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在不使用 JS 或使用其他表格的情况下转置 HTML 表格.
I'd like to transpose an HTML table without using JS or using another table.
我有一张表，我想在移动屏幕上将其折叠为单列(我需要 this 成为this).
I have a table holding a schedule which I want to collapse to single column on mobile screens (I need this to become this).
现在我有两个表，我正在通过媒体查询切换哪一个显示(以及将行折叠到单元格，如解释在本文中)，但我想要一个更好的解决方案，因为每次编辑都需要更改两个表.
Right now I have two tables and am switching which one is displayed via media-queries (as well as collapsing rows to cells as explained in this article), but I would like a better solution because every edit will require changing both tables.
我可以在不使用 JavaScript 的情况下执行此操作吗?
Can I do this without using 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>推荐答案
您可以使用 display:grid 和 display:contents (因为它不是问题) 以重构 HTML 表格的视觉布局.还需要 data-attribute 来创建缺失的单元格.
You may use display:grid and display:contents (since it is not an issue for you) to restructure the visual layout of your HTML table. A data-attribute will also be necessary to create the missing cells.
例子
table {
width: 100%;
border-collapse: collapse;
background:rgb(196, 215, 70)
}
th,
:before {
background: tomato;
box-shadow: inset 0 0 0 2px;
}
th,
td {
box-shadow: inset 0 0 0 2px;
text-align: center;
vertical-align: middle;
padding: 0.5em;
}
tr:nth-child(2n) {
background: lightblue;
}
@supports (display: contents) {
/* trick works if data-time attributes stands in html and if display:contents is supported */
@media screen and (max-width: 768px) {
table {
display: flex;
flex-flow: column;
}
thead,
tr,
tbody {
display: contents;
}
tr th:first-child {
display: none;
}
th {
background: red;
}
td {
display: table;
/* you may also use display : flex; */
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
td:before {
content: attr(data-time);
border-right: solid 1px;
display: table-cell;
/* no need if td is a flex box */
white-space: pre;
/* only if you care */
vertical-align:middle;
padding: 0.25em;
}
/* flex or grid allows to reorder content, exactly what we need and will do */
tr :nth-child(2) {
order: 0;
}
tr :nth-child(3) {
order: 1;
}
tr :nth-child(4) {
order: 2;
}
tr :nth-child(5) {
order: 3;
}
tr :nth-child(6) {
order: 4;
}
tr :nth-child(7) {
order: 5;
}
td:nth-child(2n +1) {
background: lightblue;
}
}
}<table>
<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 data-time="8:45 AM
to
1:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="8:45 AM
to
1:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="8:45 AM
to
1:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="8:45 AM
to
1:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="8:45 AM
to
1:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="8:45 AM
to
1:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
</tr>
<tr>
<th>
1:00 PM to 5:00 PM
</th>
<td data-time="1:00 PM
to
5:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="1:00 PM
to
5:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="1:00 PM
to
5:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="1:00 PM
to
5:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="1:00 PM
to
5:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="1:00 PM
to
5:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
</tr>
<tr>
<th>
5:00 PM to 9:00 PM
</th>
<td data-time="5:00 PM
to
9:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="5:00 PM
to
9:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="5:00 PM
to
9:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="5:00 PM
to
9:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="5:00 PM
to
9:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
<td data-time="5:00 PM
to
9:00 PM">
<p>Name </p>
<p>Name </p>
<p>Name </p>
</td>
</tr>
</tbody>
</table>如果你不知道的一些资源:
Some ressources if you do not know about :
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
https://css-tricks.com/get-准备好显示内容/
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
这篇关于如何堆叠表格列以模拟日历议程视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
