Question

我尝试渲染一个响应式表格布局，以便在每个桌面记录的桌面上显示一行12列，在平板电脑上显示3行4列，在智能手机上显示6列2列。

我已经做的是定义CSS3 with media queries和demo html table

问题在于 - 使用当前的实现 - 标题始终位于顶部，而我想将它们与小宽度视图（智能手机/平板电脑）的单元格值一起显示，但我不知道如何实现这个，不用对CSS3中的标题进行硬编码，但是采用参数化方式。

Answer 1

您还可以使用flexbox并执行基于列的结构。

Stack snippet

* {
  box-sizing: border-box;
}

.cols {
  display: inline-flex;
  min-width: 100%;
  border: 1px solid gray;
  counter-reset: col;
}  
.col {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  counter-increment: col;
}
.col:first-child div {
  padding: 12px;
}
.col:not(:first-child) div {
  padding: 12px 12px 12px 0;
}
.col > div:first-child {
  background: #4CAF50;
  color: white;
}
.col > div:not(:first-child) {
  border-top: 1px solid gray;
}
.col > div {
  white-space: nowrap;
}
.col > div::after {
  content: counter(col);
}
.col > div:nth-child(even) {
  background-color: #e2e2e2;
}

@media only screen and (max-width: 1024px) {
  /* For smaller desktop: */
  .cols {
    flex-wrap: wrap;
  }
  .col {
    min-width: calc(100% / 6);
  }
}

@media only screen and (max-width: 768px) {
  /* For tablets: */
  .col {
    min-width: calc(100% / 4);
  }
}

@media only screen and (max-width: 600px) {
  /* For mobile phones: */
  .col {
    min-width: calc(100% / 2);
  }
}

.pagination {
    display: inline-block;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

<div class="header">
  <h1>Responsive Table</h1>
</div>

<div class="cols">
  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

  <div class="col">
    <div>
      Header
    </div>
    <div>
      Flight
    </div>
    <div>
      Voyage
    </div>
    <div>
      Pipeline
    </div>
  </div>

</div>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

Answer 2

我想现在我已经找到了如何继续。

我要在th代码中为桌面标题定义通用CSS类，并在智能手机和平板电脑的初步媒体查询中为此类添加属性display: none;。

反向内联标题只能在较小尺寸的视图上显示。

我想这应该是标准方法，但我对不同的想法和建议持开放态度。无论如何 - 作为旁注 - 这种响应表对我来说仍然不是一个实用的方法：对于移动屏幕，可以以不同的方式设计太多东西，不仅是标题和列，还可能是记录的数量每页，页数等...我想我最好用完全不同的html页面创建不同的移动和桌面频道

带标题的响应表

2 个答案: