Html 为具有两个折叠页眉的表设置样式以用于mobile

以

表格{
边界塌陷：塌陷；
边框间距：0
}
表th{
文本对齐：左对齐；
背景色：#ccc
}
表th，
表td{
填充：.5em；
边框：1px实心#999
}

星期一
星期二
星期三
星期四
星期五
09:00 - 11:00
关闭
打开
打开
关闭
关闭
11:00 - 13:00
打开
打开
关闭
关闭
关闭
13:00 - 15:00
打开
打开
打开
关闭
关闭
15:00 - 17:00
关闭
关闭
关闭
打开
打开

我从评论中做出了一个答案，以便给其他人一些更好或更有效的答案：

包含在下面的代码片段中

• 触发前@support查询显示：内容

• 用于生成可能使用的数据属性的循环

• matchmedia（通过javascript进行媒体查询），用于更新tds的角色属性，使其变为一行，并带有伪属性

这并不是所有的工作都顺利进行，这只是想法，没有完成。请随意改进它

//从每个tr的第th个内容生成的数据属性
for（让tr为document.querySelectorAll（“tr”））{
var myDataAttr=tr.querySelector（“th”）.textContent；
对于（让tr.querySelectorAll（“td”）的td）{
td.setAttribute（“数据时间”，myDataAttr）；
}
}
//检查显示：内容是否可用
支持的var=false；
if（window.CSS）{
supported=window.CSS.supports（'display'，'contents'）；
}否则{
//现在不需要了
}
//检查td上角色属性的屏幕大小
window.onload=mymq；
window.onresize=mymq；
函数mymq（）{
常量mq=window.matchMedia（（最大宽度：768px））；
if（mq.matches&&supported！=false）{//同时检查显示：内容支持
for（让td of document.querySelectorAll（“td”））{
td.setAttribute（“角色”、“行”）；
}
}否则{
for（让td of document.querySelectorAll（“td”））{
td.setAttribute（“角色”、“单元”）；
}
}
}

表格{
宽度：100%；
边界塌陷：塌陷；
背景：rgb（19621570）
}
tr:n个孩子（2n）{
背景：浅蓝色；
}
th，
：之前{
背景：番茄；
框阴影：插入0 2px；
}
th，
运输署{
框阴影：插入0 2px；
文本对齐：居中；
垂直对齐：中间对齐；
填充：0.5em；
垂直对齐：中间对齐；
}
@支持（显示：内容）{
/*如果数据时间属性是html格式的，并且支持display:contents，这个技巧就可以工作*/
@媒体屏幕和屏幕（最大宽度：768px）{
桌子{
显示器：flex；
柔性流动：柱；
}
thead，
tr，
t车身{
显示：内容；
}
tr th：第一个孩子{
显示：无；
}
th{
背景：红色；
}
运输署{
显示：表格；
表布局：固定；
边界塌陷：塌陷；
宽度：100%；
}
td：之前{
内容：attr（数据时间）；
右边框：实心1px；
显示：表格单元格；
垂直对齐：中间对齐；
空白：预处理；
/*只要你在乎*/
填充：0.25em；
}
tr：第n个孩子（2）{
顺序：0；
}
tr:n第n个孩子（3）{
顺序：1；
}
tr：第n个孩子（4）{
顺序：2；
}
tr：第n个孩子（5）{
顺序：3；
}
tr:n第n个孩子（6）{
顺序：4；
}
tr:n第n个孩子（7）{
顺序：5；
}
}
}
/*让我们看看是否正在更新角色属性值*/
td：：之后{
内容：'role='attr（role）；
显示：块；
字体系列：信使；
字体大小：0.7em；
}

投递时段：
星期一
星期二
星期三
星期四
星期五
09:00 - 11:00
关闭
打开
打开
关闭
关闭
11:00 - 13:00
打开
打开
关闭
关闭
关闭

这不是一个完整的答案，因为我将为每个场景制作小提琴，只是想让您了解思考过程-更新：完成3/4个小提琴

我在这里玩了很多选择，有趣的挑战

简短回答 对你的问题的简短回答是否定的，你不能只使用CSS来保持给定的结构，使其具有响应性和可访问性

我可以大胆地说，不可能按你的要求去做，因为这涉及到使用某种会破坏可访问性树的显示属性（即，如果我们使用立即破坏可访问性树的

display:block

）

我甚至考虑过使用

position:absolute

（这是一个糟糕的想法，但我想看看是否可以做到），但这也立即打破了可访问性树

由于数据的结构，我所能想到的唯一使用CSS的方法就是使用成百上千的

：before

，

：after

和

内容：

CSS属性/选择器，这将是一团混乱。因此，我没有探讨这个选项，但有可能是有足够决心使这项工作的人这样做

为什么这不可能呢？ 我认为这个答案预示着回到过去的好日子，那时网页设计师使用表格进行布局。第二次应用任何定位时，浏览器假定您正在使用表格进行布局，因此将其从辅助功能树中删除（因为如果将其放在辅助功能树中，而表格用于布局，则会使网站使用起来非常糟糕！）

那么有什么选择呢？ 我有几种不同的方法可以达到最终的效果。我将尝试权衡每种方法的利弊，但每一种方法都至少违反了您的一项要求

备选案文1。为mobile view创建第二个表，并使用媒体查询将其切换出去。 通过创建第二个表，您可以为移动设备、平板电脑和桌面提供不同的信息

我很惊讶我发现t有这么多积极的方面