响应式 table 固定式 header

Question

我想制作一个响应式 table 一次显示 2 个部分，标签和值。

标签是固定的，数据是滑块。

到目前为止我有这个：

[class^=col] {
  float: left;
}
.row {
  width: 100%;
  overflow: hidden;
}
.frame {
  overflow: scroll;
}
.col-6 {
  width: 50%;
}
.col-12 {
  width: 100%;
}
.sub-row {
  border: 1px solid;
  height: 30px;
}
.sub-row:first-child {
  font-weight: bold;
}

<div class="row">
  <div class="col-6">
    <div class="sub-row"></div>
    <div class="sub-row">Test1</div>
    <div class="sub-row">Test2</div>
  </div>
  <div class="col-6">
    <div class="col-12">
      <div class="sub-row">Col1</div>
      <div class="sub-row">bla</div>
      <div class="sub-row">bla</div>
    </div>
    <div class="col-12">
      <div class="sub-row">Col2</div>
      <div class="sub-row">bla</div>
      <div class="sub-row">bla</div>
    </div>
  </div>
</div>

但请注意，数据显示在彼此下方。我希望它并排显示，隐藏在面板中以便我可以滑动它。我该怎么做？

Answer 1

在这里你可以看到一个工作示例：

这是使用 flexbox 实现的

thead, th{
  display:flex;
}

http://codepen.io/dbushell/pen/wGaamR

响应式 table 固定式 header

Responsive table with fixed header

html

css

slider

responsive