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 那么好，所以他/她在向页面提供内容时使用 WYSIWYG 编辑器。当然，他/她了解 Microsoft Office，并像在该程序中那样使用表格构建内容。

score 4 · Accepted Answer

td您可以通过使用媒体查询和应用 css 将单元格浮动到下一行来有效地包装s。不过，您需要提供一些漂亮的视觉队列来帮助人们弄清楚他们所看到的内容。这是一个小提琴演示——调整预览窗口的大小。

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

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

score 0 · Accepted Answer

你不能用 css 做到这一点（至少不容易），因为这只会影响标记的呈现。当然，如果您检测到用户使用移动浏览器访问您的网站，您当然可以使用 javascript 来完成。但是，您如何做这些事情的问题远远超出了您最初问题的范围。

很多网站都有手机版和非手机版。那里有预先编写的脚本来检测 PHP、Javascript 等中的用户代理。

score 0 · Accepted Answer

我理解你的问题，这将解决它。（丑陋的修复）

td {
  display: block;
  clear: both;
}

而是使用 div 和 css，而不是表；）

3 回答 3