如何在使用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爲一個簡單和乾淨的解決方案。