html - 可以用 CSS 重建表格吗？

Question

是否可以像这样重建一个表:

<table>
    <tr>
        <td>information 1</td>
        <td>information 2</td>
    </tr>
</table>

用 CSS 做这样的事情？

<table>
    <tr>
        <td>information 1</td>
    </tr>
    <tr>
        <td>information 2</td>
    </tr>
</table>

我问这个问题的原因是，当我将 div 最小化以用于移动显示时，这个表格在 div 中填充了内容，看起来并不好看。

更新，我需要这样做的原因: 我们正在为需要响应式设计的客户构建网站。 “问题”是客户不太了解 html/css，因此他/她在向页面提供内容时使用所见即所得的编辑器。当然，他/她了解 Microsoft Office，并像在该程序中那样使用表格构建内容。

Answer 1

您可以有效地包装 td，方法是使用媒体查询并应用 css 将单元格 float 到看起来像下一行的地方。不过，您需要提供一些漂亮的视觉队列来帮助人们弄清楚他们看到的是什么。 Here's a fiddle demonstration – 调整预览窗口的大小。

使用您的原始标记，并应用以下 CSS 将在窗口小于 400 像素宽时包裹第二个 td:

td {width: 200px; border: 1px solid black;}
@media screen and (max-width: 400px) {
    td {
        width: 100%;
        float: left;
    }
}
​