Unusual Responsive Table Functionality

Question

I'm trying to make a responsive table for a Cafe's menu. The days of the week are the headings of the columns, while the type of food are in the rows.

When the table goes into mobile view, I'm trying to get each column to appear as a separate card. Please see below for a visual example.

From this:

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

To this:

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

I've spent some time looking at various JavaScript plugins but I cannot seem to find any that provide this functionality. All of the examples I can find put the first cell of each row as the header, which is not what I want.

Can anyone help me achieve this result please.

Here is sort of what I'm looking to create although I need to have the days above each menu section

http://codepen.io/anon/pen/aOEeNz (Forked from: 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来做到这一点。 有很多方法可以实现这一点，我会给你一个：

＆＃13;

＆＃13;

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; }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;