如何在使用CSS的移动设备上响应宽表？

Question

这是我的困境。我正在更新其他人开发使用响应式设计的真正旧网站。一页有一张表格，下面有代码。桌子跨越太宽而无法移动，基本上我需要的是第二个单元显示在第一个单元之下。有没有办法在CSS中做到这一点？如果可能的话，我想不要触摸HTML。

<table style="margin-top: 15px;" width="100%"> 
    <tbody> 
    <tr> 
     <td style="vertical-align: top; padding-right: 20px;"> 
     <p><a href="">Lorem Ipsum</a></p> 
     <p><a href="">Lorem Ipsum</a></p> 
     <p><a href="">Lorem Ipsum</a></p> 
     </td> 
     <td> 
     <p><a href="">Lorem Ipsum</a></p> 
     <p><a href="">Lorem Ipsum</a></p> 
     <p><a href="">Lorem Ipsum</a></p> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

表不像响应式网格那样碰撞。如果你决定使用响应式框架。您可以从下面的链接了解更多信息：

bootstrap/responsive-tables

Answer 2

不，它不是单独的CSS可能;你需要一点Javascript来帮助你。幸运的是，有几个体面的Javascript插件可以提供很大的灵活性。

CSS-Tricks有很好的roundup。我个人喜欢Filament Group的Tablesaw。所有你需要做的就是链接他们的JavaScript，然后添加适当的属性到你的表来获得你想要的功能（因为它提供了很多选项）。

另外我喜欢Zurb's plugin为一个简单和干净的解决方案。