如何堆叠 table 列来模拟日历议程视图？

Question

我想在不使用 JS 或使用另一个 table 的情况下转置 HTML table。

我有一个 table 的时间表，我想在移动屏幕上将其折叠成单列（我需要 this to become this）。

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

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

Answer 1

您可以使用 display:grid 和 display:contents （因为这对您来说不是问题） 来重构您的 HTML table。 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>

一些您不知道的资源：

如何堆叠 table 列来模拟日历议程视图？

How to stack table columns to simulate calendar agenda view?

html

css

responsive-design

responsive