Question

我想创建一个响应表，一次显示2个部分，标签和值。

标签将被修复，数据将成为滑块。

到目前为止，我有这个：

＆＃13;

[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;
}

＆＃13;

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

＆＃13;

但请注意，数据正在彼此之下显示。我想让它并排显示，隐藏在面板中，这样我就可以滑动它。我怎么能这样做？

Answer 1

在这里你可以看到一个有效的例子：

这是使用flexbox

实现的

thead, th{
  display:flex;
}

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

带有固定标题的响应表

1 个答案: