在多个表格中分割HTML表格

Question

我的任务是创建一个响应式HTML/CSS表。在移动设备上时，列被分为3个表，而行被保留。

如何在移动设备上创建此拆分版本。还是应该为此使用CSS网格？

台式机版本：

这是表格的移动版本的外观：

Answer 1

您需要在CSS中使用媒体查询，以使表具有响应性并使用类。我个人会为此推荐一个CSS框架，例如Bootstrap，Tailwind，Bulma或Semantic UI，但是您需要了解媒体查询。

您可以创建类，这些类将根据放置位置的不同来响应更改表主体的宽度。

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

对于特定的响应表设计，我还将转到链接用户e9841pratik referenced

Media Queries Refrence