如何使用 CSS 使 TD 表现得像 TR(row)？答案

【问题标题】：How to make TD behaving like TR(row) with CSS?如何使用 CSS 使 TD 表现得像 TR(row)？
【发布时间】：2019-01-22 17:51:19
【问题描述】：

我有一个动态创建 html 表的组件。根据我的需要，我需要将 td 标签逐行显示为块元素，而不是列。如何使用 CSS 做到这一点？

【问题讨论】：

你能发布图片吗？你应该使用填充边距等来格式化你的 td 看起来像一个块
这听起来像是一个非常可怕的黑客攻击。我认为您不会找到适用于所有浏览器的解决方案（旧版本的 IE 会讨厌您！）。如果您更清楚地解释您实际想要实现的目标，我们或许可以提出可能效果更好的替代解决方案。
@Spudley 我决定更改允许我编写自己的 html 的组件。感谢您的回答。

【解决方案1】：

您可以通过将display: block 应用于tds 来做到这一点：

这适用于除 IE9 之外的所有现代浏览器..

使用float: left; width: 100% 代替它可以在 IE8/9 中工作：

没有什么可以让它在 IE7 中工作。

【讨论】：

【解决方案2】：

Try this:

td{
    display: table-row
}

【讨论】：

【解决方案3】：

您可以使用display: block css 属性，如this fiddle 所示

【讨论】：

【解决方案4】：

我不确定这是您期望的解决方案。

【讨论】：

【解决方案5】：

你可以使用 colspan 属性

<tr>
<td colspan="2">some content</td>
</tr>

这将创建一个跨越两列的单元格

【讨论】：