响应式表格渲染，带有适应新布局的标题答案

【问题标题】：Responsive table rendering, with headers that accommodate to new layout响应式表格渲染，带有适应新布局的标题
【发布时间】：2015-05-12 19:23:18
【问题描述】：

是否有某种方法可以使表格响应，以这样的方式 - ：

┌─────────┬─────────┬──────────┐
│         │ ENTITY 1│  ENTITY 2│
├─────────┼─────────┼──────────┤
│ HEADER 1│    data │     data │
│ HEADER 2│    data │     data │
│ HEADER 3│    data │     data │
│ HEADER 4│    data │     data │
│ HEADER 5│    data │     data │
└─────────┴─────────┴──────────┘

变成这个（低于800px浏览器宽度）-:

    ┬─────────┬──────────┐
    │ ENTITY 1│  ENTITY 2│
    ┼─────────┼──────────┤
    │       HEADER 1     │
    ┼─────────┼──────────┤
    │    data │     data │
    ┼─────────┼──────────┤
    │       HEADER 2     │
    ┼─────────┼──────────┤
    │    data │     data │
    ┼─────────┼──────────┤
    │       HEADER 3     │
    ┼─────────┼──────────┤
    │    data │     data │
    ┼─────────┼──────────┤
    │       HEADER 4     │
    ┼─────────┼──────────┤
    │    data │     data │
    ┼─────────┼──────────┤
    │       HEADER 5     │
    ┼─────────┼──────────┤
    │    data │     data │
    ┴─────────┴──────────┘

这可以仅使用 CSS 完成，还是需要使用 JavaScript？

【问题讨论】：

试试 jquery footable 插件。
看来Bootstrap应该能搞定。
你可以使用大量的css媒体查询和样式为表格元素的div来做到这一点，但使用javascript会更容易。
@Sushil 你的意思是这样的 - fooplugins.com/footable/demos/group-headers.htm，但是上面的图片并没有给出想要的布局。
是的@branquito。但是footable以不同的方式做到这一点。如果你对它没问题，那么你可以使用它。

标签： javascript css-tables

【解决方案1】：

.cell {
  text-align: center;
}
.cell:nth-child(1) { display: none; }

.mobile-row {
  display: table;
  width: 200%;
  text-align: center;
}

.mobile-row > td {
  width: 100%;
}


.no-mobile {
  display: none;
  @media (min-width: 704px) {
    display: table;
  }
}

<table>
  <thead>
    <th class="no-mobile"></th>
    <th>ENTITY 1</th>
    <th>ENTITY 2</th>  
  </thead>
  
  <tbody>
    <tr class="mobile-row">
      <td>Header 1</td>
    </tr>
    <tr>
      <td class="cell">Header 1</td>
      <td class="cell">Stuff</td>
      <td class="cell">Stuff 2</td>
    </tr>
    <tr class="mobile-row">
      <td>Header 2</td>
    </tr>
    <tr>
      <td class="cell">Header 1</td>
      <td class="cell">Stuff</td>
      <td class="cell">Stuff 2</td>
    </tr>
    <tr class="mobile-row">
      <td>Header 3</td>
    </tr>
    <tr>
      <td class="cell">Header 1</td>
      <td class="cell">Stuff</td>
      <td class="cell">Stuff 2</td>
    </tr>
  </tbody>
</table>

您也许可以考虑为移动视图设置一个额外的隐藏行。看看我的移动优先风格。

【讨论】：