Html 基于表的响应式用户界面

我一周有7张桌子。 每个表定义一周中的一天。 我想将其最小化并使用智能手机中的网站， 当我将其最小化时，表格会出错：

我怎么修理它

.table{
宽度：14.286%；
背景色：白色；
}

星期日
{{settingtime.time}
删除
{{sidor.workerName}

{{sidor.roleName}}



创建班次

使用将是实现此UI的最佳方法

CSS Grid Layout擅长将页面划分为主要区域，或定义由HTML原语构建的控件各部分之间的大小、位置和层关系。 与表格一样，网格布局允许作者将元素对齐到列和行中。然而，与表相比，CSS网格可以实现更多的布局，或者更容易实现更多的布局。例如，网格容器的子元素可以定位它们自己，以便它们实际上重叠和分层，类似于CSS定位的元素

检查实现详细信息

简单的CSS网格示例：

*{框大小：边框框；}
img{最大宽度：100%；}
.卡片容器{
显示：网格；
填充：1rem；
网格模板列：重复（自动拟合，最小值（120px，1fr））；
网格间距：1rem；
}
.卡片{
显示：网格；
背景色：红色；
填充物：5px；
}

洛雷姆·伊普苏姆·多洛尔·阿梅特。。。
洛雷姆·伊普苏姆·多洛尔·阿梅特。。。
洛雷姆·伊普苏姆·多洛尔·阿梅特。。。
洛雷姆·伊普苏姆·多洛尔·阿梅特。。。
洛雷姆·伊普苏姆·多洛尔·阿梅特。。。
洛雷姆·伊普苏姆·多洛尔·阿梅特。。。

HTML表格由于在当天被滥用用于布局目的而赢得了不好的声誉

使用div和css的典型解决方案也有自己的可能陷阱

这并不意味着您永远不应该使用表：表数据实际上应该建模为html表

无论如何，要创建一个好的（响应性）网站，诀窍是双重的：

• 从数据是什么开始。这就是用html编写代码的方式

• 从您希望在最小的屏幕上看到它的方式开始，并向上移动到更大的宽度，以了解如何使它作出反应：这就是您编写CSS的方式

最后：第一个问题是，你想在小屏幕上看到什么样的日历

你可以控制事物的外观。即使您在

和

中编写代码，您仍然可以将其呈现为表格，这就是CSS可以为您做的。这就是

display:table cell

之类的东西可以帮助您完成的

为了让CSS对屏幕宽度做出反应，有“媒体查询”可以帮助您

FWIW：内联CSS通常是不受欢迎的，它会对你不利

---

但是，第一步很简单：您希望它在小屏幕上的外观如何。

我将它与您正在使用的Bootstrap“table striped”类结合使用？如果是这样的话，你可以使用网格系统吗？什么是网格系统？CSS网格：老实说，我不知道如何使用它..你能在这里帮助我并给我答案吗？我真的不知道如何实现这一点阅读我提供的CSS网格文档，至少尝试一下，然后再让别人帮你做。