Question

我正在寻找一种快速方法来获取大量数据的响应式html表（超过500行，每行15列）。我尝试了许多像footable这样的javascript解决方案，但它确实太慢了。

footable渲染是完美的，但我想找到一个只有css技巧的类似解决方案。

主要目标是为桌面提供一个普通表，在移动版本中只显示一些列的部分表，以及一个单击操作，在当前表行下展开其余列，如footable。

html示例

<table class="f-tab">
  <thead>
    <tr>
      <th>name</th>
      <th>d1</th>
      <th>d2</th>
      <th>d3</th>
      <th>d4</th>
      <th>d5</th>
      <th>d6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="name">item 1</td>
      <td class="d1">val 1</td>
      <td class="d2">val 2</td>
      <td class="d3">val 3</td>
      <td class="d4">val 4</td>
      <td class="d5">val 5</td>
      <td class="d6">val 6</td>
    </tr>
    ...
  </tbody>
</table>

css示例

.f-tab {
  min-width: 320px;
}
.f-tab th, .f-tab td {
  display: none;
}
.f-tab tr.visible td {
  display: block;
}
.f-tab td.name, .f-tab td.d1, .f-tab td.d3 {
  display: inline-block;
}
@media (min-width: 480px) {
  .f-tab th, .f-tab td {
    display: table-cell;
  }
}
.f-tab {
  overflow: hidden;
}

js例子

$(".f-tab tr").click(function () {
  $(this).toggleClass("visible");
});

在我的示例中，我想将列“name”，“d1”和“d3”显示为表列，并在显示块中显示其他列当我单击tr时，在当前行下。

___________________
name  |  d1  |  d3
d2
d4
d5
d6
___________________

我首先尝试使用嵌套的ul / li但是我无法获得好的东西。

响应式css表用于庞大的数据集

0 个答案: