html - CSS - 显示表格和表格单元格 div 上的水平空白

Question

我有一个水平空白无缘无故出现在 div 内的问题。我的意思是，我无法弄清楚它为什么会出现，它只是没有任何意义。

这是 Fiddle

布局应为两列:一右一左，后一列较大。问题是在右侧的 div 上我看到定期显示的内容，所有对齐方式都显示得很好。在左边，它的内容较低，我的意思是它似乎有一个大约 5px 的填充顶部，但根本没有填充。空白位于左侧表格单元格 div 的内部，因为即使其中包含纯文本(“Lorem ipsum”)，文本显示也低于右侧 div 中的内容。

HTML代码是:

<div id="main_contents_cage">
    <div id="main_contents_left">
        <table> ... some content ... </table>
    </div>

    <div id="main_contents_right">
        ... some other content ...
    </div>
</div>

CSS 是:

#main_contents_cage { display: table; }
#main_contents_left, #main_contents_right { display: table-cell; }

#main_contents_left { width: 742px; }
#main_contents_right { width: 246px; border-left: 1px solid #C6C6C6; } 

我在互联网和 StackOv 上搜索了有同样问题的其他人，但没有找到有同样问题的人。相似，但完全不一样!

我尝试为所有元素提供边框折叠/边框间距(每个元素一次，然后只是“表格”一个，然后只是“表格单元格”，然后是三个):什么都没有。

我尝试更改表格单元格 div 的内容，但没有任何不同的结果(用其他 div 替换表格，或者只是纯文本....)。

有人知道吗？

Answer 1

我遇到了同样的问题。我也能够通过将“vertical-align: top”分配给 table-cell 元素来“解决”这个问题。这似乎只是 Chorme 中的一个问题。对我来说，它只是右栏(而不是像你的例子中的左栏)