在多个表中拆分 HTML 表 [英] Split HTML table in multiple tables

问题描述

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

I have this task to create a responsive HTML/CSS table. When on mobile, columns are split in 3 tables while rows are kept.

如何在移动设备上创建此拆分版本.或者我应该为此使用 CSS 网格?

How can I create this split version on mobile. Or should I use CSS grid for this?

桌面版:

移动版的表格应该是这样的:

This is how mobile version of table should look like:

推荐答案

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

You'll need to use media queries in CSS to make the table responsive and use classes. I personally would recommend a CSS framework for this like Bootstrap, Tailwind, Bulma or Semantic UI but you'll need to understand media queries for that.

您可以创建类，根据它们的放置位置改变表格主体的宽度.

You can create classes that will respond to change the width of the table body depending on where they are placed.

/* 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 引用

Also for specific responsive table design, I would go to the link user e9841pratik referenced

媒体查询参考

这篇关于在多个表中拆分 HTML 表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！