我可以使用 CSS 将表格的列拆分为新行吗？答案

【问题标题】：Can I break the columns of a table to new lines with CSS?我可以使用 CSS 将表格的列拆分为新行吗？
【发布时间】：2017-04-11 22:04:26
【问题描述】：

我有这张桌子：

<table>
<tr>
    <td>Title 1</td>
    <td>Title 2</td>
    <td>Title 3</td>
</tr>
<tr>
    <td>Description 1</td>
    <td>Description 2</td>
    <td>Description 3</td>
</tr>
<tr>
    <td>Button 1</td>
    <td>Button 2</td>
    <td>Button 3</td>
</tr>
</table>

并以这种方式显示

现在我想用 CSS 拆分列，以便表格以这种方式显示

有可能吗？

【问题讨论】：

您对标记有任何控制权吗？
使用 CSS 是不可能的。正如Shaggy所说，您需要修改您的html或使用JavaScript来拆分您的表格。
通过 CSS ，您可以使用 display:contents 和 flex 重新排序元素 codepen.io/gc-nomade/pen/WjeEpV .... 但我相信此时只有 FF 支持 display:contents
很好的解决方案 Gcyrillus！从未听说过display: contents，但正如你所说，它只适用于 Firefox。

标签： html css html-table

【解决方案1】：

不，您必须为此制作 3 个单独的表格。

【讨论】：

【解决方案2】：

您可能需要创建 3 个表

【讨论】：