如何在手机/平板电脑上将4栏表格(css)转换为2栏

Question

对于我最近的项目，我必须创建一个响应表，如下所示。我必须转换5列表格到2列在小屏幕上。我想我可以用(复杂的) jQuery做到这一点，但这是最后的选择。我正在努力寻找一种更具语义性的方式。我将向其中添加非表格内容，因此我必须使用CSS表格。我可以做到单列，但不知道如何在小型设备和桌面设备之间进行这种复杂的转换。我试了很多，但没有成功。我没有选择(由于某些原因)来使用其他响应技术。我正在寻找一个人如何可以建议一种方法来做到这一点。如果这是不可能的，请告诉我。

​

​

Answer 1

这里有一篇博客文章，可能会给你指明正确的方向：

CSS Tricks Responsive Data Tables

我以前用过这种技术，效果很好。表的标题结构的一部分是使用伪元素重新创建的。通过一些调整来匹配你的情况，它可能只对你有效。

试试看。