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

不，仅靠CSS不可能;你需要一些Javascript来帮助你。幸运的是，有几个不错的Javascript插件提供了很大的灵活性。

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

或者我喜欢Zurb's plugin以获得简单而干净的解决方案。

Answer 2

表格不像响应式网格那样会发生冲突。如果您决定使用响应式框架。您可以从以下链接获取更多信息：

bootstrap/responsive-tables

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

2 个答案: