javascript - 不寻常的响应表功能

Question

我正在尝试为咖啡馆的菜单制作一个响应式表格。星期几是列的标题，而食物的类型在行中。

当表格进入移动 View 时，我试图让每一列显示为单独的卡片。请参阅下面的视觉示例。

来自这里:

+------+---------+----------+-----------+
| -    | Monday  | Tuesday  | Wednesday |
| Soup | Tomato  |  Leek    | N/A       |
| Main | Burgers | Sausages | Pizza     |
+------+---------+----------+-----------+

对此:

+------+---------+
| -    | Monday  |
| Soup | Tomato  |
| Main | Burgers |
+------+---------+
+------+----------+
| -    | Tuesday  |
| Soup | Leek     |
| Main | Sausages |
+------+----------+

我花了一些时间查看各种 JavaScript 插件，但我似乎找不到任何提供此功能的插件。我能找到的所有示例都将每行的第一个单元格作为标题，这不是我想要的。

谁能帮我实现这个结果。

虽然我需要在每个菜单部分上方显示日期，但这是我想要创建的内容

http://codepen.io/anon/pen/aOEeNz(派生自:http://codepen.io/geoffyuen/pen/FCBEg)

@import "http://fonts.googleapis.com/css?family=Montserrat:300,400,700";
.rwd-table {
  margin: 1em 0;
  min-width: 300px;
}
.rwd-table tr {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.rwd-table th {
  display: none;
}
.rwd-table td {
  display: block;
}
.rwd-table td:first-child {
  padding-top: .5em;
}
.rwd-table td:last-child {
  padding-bottom: .5em;
}
.rwd-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
}
@media (min-width: 480px) {
  .rwd-table td:before {
    display: none;
  }
}
.rwd-table th, .rwd-table td {
  text-align: left;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child, .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child, .rwd-table td:last-child {
    padding-right: 0;
  }
}

body {
  padding: 0 2em;
  font-family: Montserrat, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #444;
  background: #eee;
}

h1 {
  font-weight: normal;
  letter-spacing: -1px;
  color: #34495E;
}

.rwd-table {
  background: #34495E;
  color: #fff;
  border-radius: .4em;
  overflow: hidden;
}
.rwd-table tr {
  border-color: #46627f;
}
.rwd-table th, .rwd-table td {
  margin: .5em 1em;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    padding: 1em !important;
  }
}
.rwd-table th, .rwd-table td:before {
  color: #dd5;
}

<table class="rwd-table">
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td data-th="Soup">Tomato</td>
    <td data-th="Main">Burger</td>
    <td data-th="Desert">Ice Cream</td>
  </tr>
  <tr>
    <td data-th="Soup">Tomato</td>
    <td data-th="Main">Burger</td>
    <td data-th="Desert">Ice Cream</td>
  </tr>
  <tr>
    <td data-th="Soup">Tomato</td>
    <td data-th="Main">Burger</td>
    <td data-th="Desert">Ice Cream</td>
  </tr>
</table>

Answer 1

正如 Yakutsa 所说，您可以仅使用 css 来完成此操作。有很多方法可以实现这一点，不过我会给你一个:

ul { display: block; position: relative; width: 100%; }
li { display: block; position: relative; float: left; width: 15%; }

@media (min-width: 400px)
{
    ul:before { content: "- Soup Main"; display: block; position: relative; float: left; width: 15%; word-spacing: 9999999px; }
}
@media (max-width: 399px)
{
    li { width: 100%; }
    li:before { content: "- Soup Main"; display: block; position: relative; float: left; width: 50px; word-spacing: 9999999px; }
}

<ul>
    <li>Monday<br />Tomato<br />Burgers</li>
    <li>Tuesday<br />Leek<br />Sausages</li>
    <li>Wednesday<br />N/A<br />Pizza</li>
</ul>