如何堆叠表格列以模拟日历议程视图？答案

【问题标题】：How to stack table columns to simulate calendar agenda view?如何堆叠表格列以模拟日历议程视图？
【发布时间】：2019-10-06 00:34:52
【问题描述】：

我想在不使用 JS 或使用其他表格的情况下转置 HTML 表格。

我有一张表格，里面有一个时间表，我想在移动屏幕上折叠成单列（我需要 this 变成 this）。

现在我有两个表格，并且正在切换通过媒体查询显示哪个表格（以及按照in this article 的解释将行折叠到单元格），但我想要一个更好的解决方案，因为每次编辑都需要更改两个表格.

我可以在不使用 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>

【问题讨论】：

可能有可能或建议，但您不分享任何 html 代码或 css 或您的任何尝试。所以，没有什么可开始考虑帮助你的一些或其他方式。
用codepen更新了问题
好的，数据属性有一些技巧，与 display:contents 混合，你可以做类似的事情：codepen.io/gc-nomade/pen/abbbddW 我不会回答这个问题，除非display:contents不是问题对你来说，你也可以过滤支持，然后触发媒体查询：codepen.io/gc-nomade/pen/VwwweeX（相同但仅当 @supports 匹配）如果不支持 display:contents，则表格保持原样
看起来很完美！ display: contents 支持应该没问题，因为我们不必支持旧浏览器。谢谢！

标签： html css responsive-design responsive

【解决方案1】：

您可以使用display:grid 和display:contents （因为这对您来说不是问题） 来重构您的 HTML 表格的视觉布局。 data-attribute 也是创建缺失单元格所必需的。

例子

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>

如果你不知道的一些资源：

【讨论】：