CSS-顯示表格和表格單元格div上的水平空白

Question

我有一個水平空白出現在div內的問題，沒有任何原因。 我的意思是，我無法弄清楚為什么會這樣，只是沒有任何意義。

這是小提琴

布局應為兩列：一列右一列，后一列較大。 問題是，在右邊的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上搜索了其他有相同問題的人，卻沒有找到任何有相同問題的人。 相似，但根本不一樣！

我嘗試為所有元素（每個元素一次，然后是“表格”元素，然后是“表格單元格”元素，然后是其中三個）賦予border-collapse / border-spacing：什么都沒有。

我嘗試更改表格單元格div的內容，而沒有任何不同的結果（用其他div替換表格，或僅使用純文本...。）。

有人知道嗎？

Answer 1

我遇到了同樣的問題。 通過將“ vertical-align：top”分配給table-cell元素，我也能夠“解決”該問題。 這在Chorme中似乎只是一個問題。 對我來說，它只是右列（如您的示例中的左列）

Answer 2

帶有“ main_contents_left”類的div的內容具有表標記，該表標記不包含子行或子級單元格，這可能與之相關嗎？

如果您有興趣，這是我的jsFiddle的鏈接

Answer 3

好的，我弄清楚了：我需要在“ table-cell” div中添加“ vertical-align：top”，以便內容在頂部沒有空格顯示！

我知道在小提琴中它可以工作，但是即使沒有CSS（我只需要CSS），我也真的無法使其在我的網頁上工作。 （FF 13，Chrome 20）。

謝謝