CSS中断表并重复第一列

Peter,构造这个函数的更好方法是完全不使用Table元素。

相反,请使用一系列div元素,并在单个div上为它们提供显示类型“table cell”,以及行和整个表所需的“display:table”和“display:table row”。

见: http://www.senktec.com/2014/01/using-css-display-table-cell-for-columns/

举个例子。

一旦你把东西分解成独立的div's,你就可以自由地把这些div放在你认为合适的地方,你可以在div的结构上重新布置一下,在你在问题中提到的表格的第一部分下面放一个新的集合。

然而,一旦您使用了div元素,这实际上会通过使用FlexBox和更具体的“flex wrap”来打开一种更有趣的工作方式。

Flexbox和它的包装模式将完全满足您的要求,您只需要让父容器“display:flex”,添加一个flex-wrap css规则,容器的直接div子容器将自行处理。

目前所有主流浏览器都完全支持Flexbox,而且自从HTML4以来,各种表格显示模式就一直存在,因此您不会对其中任何一种工作方式产生任何问题。Flex也主要在IE11上工作,有一些次要的边缘案例(3年前,flexbox刚推出时,我为一家公司实现了一个在线设计师,目标是IE11)。

使用单独的div方法,并且如果您的目标是合理的最新浏览器,那么实际上可以更进一步,使用CSS媒体查询来调整不同的显示宽度

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

你甚至可以用CSS做一些特征检测

https://css-tricks.com/using-feature-detection-to-write-css-with-cross-browser-support/

在纯CSS中,我唯一想不出一个可能的解决方案是重复使用coutt names列,尽管我怀疑您实际上可以使用“data attributes”和针对这些属性的CSS规则来将列名的文本变为某种“element::before”伪CSS规则,我需要坐下来花一天的时间思考这个想法,然后想出具体的办法。