Question

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

┌─────────┬─────────┬──────────┐
│         │ 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？

Answer 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>

您可能会考虑为移动视图增加一个隐藏行。看看我的手机优先风格。

响应式表格渲染，包含适用于新布局的标题

1 个答案: