Question

我有一个DIV表，它完全响应。当我们在小屏幕中查看时，桌子的头部应该在每个部分重复。现在它显示在第一部分，但第二部分缺少标题。

如何在小屏幕上的每个部分显示标题？看起来像这样的样本：https://codepen.io/geoffyuen/pen/FCBEg（这个样本是一个表，我的表是一个DIV表）

注意：需要最小化浏览器才能看到表格响应。

CSS

.header {
  width: 100%;
  float: left;
}
.header1 {
  width: 33%;
  float:left;
  background: #bbb;
  height: 25px;
}
.row1, .row2 {
  width: 33%;
  float:left;
  background: #ddd;
  height: 25px;
}
@media all and (max-width: 480px)
 {
   .header
   {
     width:40%;
     height: 100%;
     float:left;
      background: red !important;

    }
    .header1, .row1, .row2 {width: 100% !important}
    .row {
      width: 60% !important; margin-bottom: 5px; float:left
      }
 }

HTML

<div class="table">
    <div class="header">
        <div class="header1">
              Header 01
        </div>
        <div class="header1">
              Header 02
        </div>
        <div class="header1">
              Header 03
        </div>
    </div>
    <div class="row">
        <div class="row1">
              row 01-1
        </div>
        <div class="row1">
              row 02-1
        </div>
        <div class="row1">
              row 03-1
        </div>
    </div>
    <div class="row">
      <div class="row2">
        row 01-2
      </div>
      <div class="row1">
        row 02-2
      </div>
      <div class="row1">
        row 03-2
      </div>
    </div>
</div>

Answer 1

Div Table Image

如果您运行了已提供的代码段，则结果就是这样。我假设这是你想要的，但是，我确实在你的CSS中看到了很多冗余。例如，为什么有两个类row1和row2它们是同一个东西？除非你打算改变它，所以它们以后会有所不同。

Div表响应 - 标题重复

1 个答案: