html - 具有固定标题的响应表

Question

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

标签将是固定的，数据将是一个 slider 。

到目前为止我有这个:

[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