极客观点
项目管理
HarmonyOS
我有一个简单的需要垂直显示表格行的单元格。这在 FF 中工作得很好，但在 Ipad 上的 Chrome 或 Safari 中却不行。
下面的示例在 FF 中按预期呈现，每个行单元格在彼此下方，但在 Chrome 中，它似乎完全忽略了 display:block。
有什么问题 - 或者有更好的方法来做到这一点。
（想要这个的原因是我在 CSS 中使用 @media 来为小屏幕呈现不同的表格）
一个更直观的例子：
一张普通的桌子可能是
DATA1 | DATA2 | DATA3
但使用显示：块，它应该是
DATA1
DATA2
DATA3
非常感谢
<html>
<head>
<style>
table,
thead,
tr,
td
{
display:block;
}
table,tr
{
border : 1px dotted red;
}
td
{
border:1px dashed blue;
}
thead
{
display:none;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>Heading 1</td>
<td>Heading 2</td>
<td>Heading 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>
原文由 graemegets 发布，翻译遵循 CC BY-SA 4.0 许可协议
编辑2：
我想我已经解决了你的问题。当没有为您的 html 声明的
<!DOCTYPE>时，Webkit 会覆盖display: block;并将其计算为 td 中的display: table-cell;。要解决此问题，我建议您在 html 顶部的
<!DOCTYPE html><html>jsfiddle 可以工作的原因是该站点已经声明了
<!DOCTYPE>。试试这个，让我知道它是否能解决您的问题。如果没有，我会尝试找到另一个答案。