Html CSS中断表并重复第一列

我正在修改一个网站，该网站目前使用

作为价目表

因为桌子显然不会“断开+包裹”，所以在移动设备上，桌子的右侧会从屏幕的右侧消失

我想使用CSS使这个价目表具有响应性，这样当浏览器超出宽度时，它会呈现下面的下一列。如果我停止使用单个表并使用

float:left

，这就足够简单了，但在这种情况下，我希望在发生水平中断时重复小屋的名称（第一列）

---

这可能吗？如果是这样，我将如何实现它呢？

Peter，构建这个来实现目标的更好方法是根本不使用Table元素

相反，可以使用一系列div元素，并在各个div上为它们指定显示类型“table cell”，在需要行和整个表的地方，还可以为它们指定“display:table”和“display:table row”

见：

举个例子

一旦你把事情分解成单独的div，然后你可以自由地把这些div放在你认为合适的地方，你可以在div的结构中重新布局，在表的第一部分下面放一个新的集合，正如你在问题中提到的

然而，一旦您使用了div元素，这实际上就打开了一种更有趣的方式，通过使用FlexBox和更具体的“flex-wrap”

Flexbox和它的包装模式正是您想要实现的，您只需要将父容器设置为“display:flex”，添加一个flex包装css规则，容器的直接div子容器将自行处理

现在所有主流浏览器都完全支持Flexbox，而且从HTML4开始，各种表格显示模式就已经存在，所以您的任何一种工作方式都不会有问题。Flex也主要在IE11上工作，有一些次要的边缘案例（3年前，当flexbox首次引入时，我为一家公司实现了一个在线设计师，目标是IE11）

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

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

---

在纯CSS中，我唯一想不出一个可能的解决方案是重复“小屋名称”列，尽管我怀疑您实际上可能能够通过使用“数据属性”和针对这些属性的CSS规则，将列名的文本变为某种“element:：before”伪CSS规则，我需要坐下来，花一天的时间来研究这个想法，然后拿出具体的想法。

你可以使用colspans的bootstrap：也应该使用只包含HTML和CSS的Responsive网格：你能给我们看看你当前的代码吗？谢谢你的帮助！任何时候，彼得，很高兴这对你有所帮助。：-）