Question

我有一张桌子，我想要make td来显示块，它可以在firefox等上运行..但是没有在Chrome上运行，我想可能由用户代理样式表决定，即使我之前放了<!DOCTYPE html> html标签，但仍然不起作用，甚至重要，它看起来像覆盖，但实际上它是读取用户代理样式表

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

在我的页面中没有CSS，我没有使用bootstrap。任何解决方案我搜索了但都说<!DOCTYPE html>问题！

Answer 1

您的表格应为display: table。如果您担心内线，请尝试将display:block添加到子元素中。

原因是display: table创建表格 布局机制，因此行和列将正确布局;

在某些情况下，如果所需的元素不存在，则会隐式创建它们，但它可能会导致问题。（您可以通过制作包含div的表格布局并将其设置为display: table，table-row，table-cell来测试，这是表， tr 和 td 元素。如果您在不同的组合中使用取消设置div上的样式，您会发现有时浏览器会隐式地使用表格布局不正确。）

因此，如果您想要实际的表格布局，请始终保持display: table-* styles完好无损。使用适当的样式整理衬里问题。

您可以尝试跨越几个 div ，并使用colspan（在td上）和{定义您的子元素{1}}（在子元素上）。

Answer 2

在上次Chrome更新45.0.2454.85后，我在响应中遇到了同样的问题。在响应断点（媒体查询）调整浏览器大小后，或者从纵向切换到横向和返回时，如果横向没有堆叠表格单元格和纵向，堆叠的表格单元格将呈现为表格单元格和表格行的混合形式没有。仅当有两个以上的表格单元格时才会出现此错误。

解决方案：在包含表格行tr中将其设置为：table-cell。

table.classname tr { display:table-cell !important; }
table.classname td { display:block; width:100% !important; }

Answer 3

尝试的 float: left;

display: block 的工作
不影响IE / FF

表td显示块无法在Chrome上运行

3 个答案: