我正在修改当前使用<table>作为价目表的网站。

表

由于表格显然不会折断+包裹,因此在移动设备上,表格的右侧消失在屏幕的右侧。

我想使用CSS来使此价目表具有响应性,以便当浏览器用完宽度时,它将在下面显示下一个列。 如果我停止使用单个表并使用float:left ,这非常简单,但是在这种情况下,我希望在发生水平中断时重复平房的名称(第一列)。

移动包装

这可能吗? 如果是这样,我将如何实现?

===============>>#1 票数:1

彼得,构造此目标的更好方法是根本不使用Table元素。

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

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

举个例子。

将内容分解为单独的div后,您可以自由地将这些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/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries

而且您甚至现在也可以使用CSS进行某些功能检测

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

对于纯CSS,我无法提出的唯一解决方案是重复使用“山寨名称”列,尽管我怀疑您实际上可以使用“数据属性”和针对这些属性的CSS规则来混淆某些内容。将列名称的文本转换为某种伪CSS规则的“ element :: before”规则,我需要坐一整天来研究这个想法,以提出具体的建议。

  ask by Peter Morris translate from so

本文未有回复,本站智能推荐: