代码之家 › 专栏 › 技术社区 › Matt Joiner

CSS表格单元格中的表格元素偏移其他表格单元格内容

css-tables css html

Matt Joiner · 技术社区 · 15 年前

中的下表元素 "center" DIV导致 "left" 要从顶部偏移几个像素(在我的浏览器中为8个)的分区。在表格前添加一些文本将删除此偏移量。

为什么?如何在不需要在我的表前使用“虚拟”文本行的情况下阻止这种情况发生?

<html>
<head>
    <style type="text/css">
        #left {
            display: table-cell;
            background-color: blue;
        }
        #menu {
            background-color: green;
        }
        #center {
            background-color: red;
            display: table-cell;
        }
    </style>
<body>
    <div id="left">
        <div id="menu">
            Menu 1<br>
            Menu 2<br>
        </div>
    </div>
    <div id="center">
        <table><tr><td>This is the main contents.</tr></td></table>
    </div>
    <div id="left">
        <div id="menu">
            Menu 1<br>
            Menu 2<br>
        </div>
    </div>
</body>
</html>

更新0

注意,有了浮点数,我无法获得 居中的 列扩展到其内容。我从中提取此示例的源使用 display: table; margin-left: auto; margin-right: auto; 把身体的所有东西都放在中心。

2 回复 | 直到 7 年前

Ray 15 年前

我可以通过添加 vertical-align:top; “左”风格。

你应该把 display: table-cell 在另一个分区中使用 display:table-row

Adam Hopkinson 15 年前

我猜你有一个 margin-top 设置在您的 <table> . 看看萤火虫。

table {
margin-top: 0;
}

你有什么特别的理由这样安排吗?您可以浮动div并在不设置的情况下进行高级布局 display: table-cell . 此外,表只能用于表格数据。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前