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

我有一個出現在div區域內的水平空白區域沒有任何理由的問題。我的意思是，我不能'弄清楚它爲什麼會出現，它沒有任何意義。CSS - 顯示錶格和表格單元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爲別人同樣的問題，而不帶有同樣的問題找到任何人。類似，但不一樣！

我試着給所有的元素（每個元素一次，然後只是「表」一個，然後只是「表格單元」，然後是三個）給出border-collapse/border-spacing：什麼也沒有。

我試着改變表格單元div的內容，沒有任何不同的結果（用其他div替換表格，或只是純文本....）。

任何人有任何想法？

來源

2012-07-24 tobia.zanarella

你可以把它放在一個jsfiddle嗎？如果我們可以看到更容易幫助 – 2012-07-24 16:36:24

當然，問題已糾正！隨着小提琴它似乎工作，但我試圖在我的網頁，我真的不能使它的工作！ – 2012-07-24 16:41:31

Chrome的元素檢查器是否顯示任何CSS應用於您不期望的元素？ – jmbertucci 2012-07-24 16:46:55

我遇到了同樣的問題。我也能通過將「vertical-align：top」分配給table-cell元素來「解決」這個問題。這似乎只是Chorme的一個問題。對我來說，這是隻有右列（而不是你的例子中的左邊）

來源

2015-04-28 17:24:20 Wes

與「main_contents_left」類的div的內容的表標記不包含子行或孫子單元格，可能與它有什麼關係？

這裏是我jsFiddle一個鏈接，如果你有興趣

來源

2012-07-24 16:44:03 BadPockets

看到我的答案，並且謝謝你！ – 2012-07-24 16:48:55

好吧，我想通了：我需要添加「垂直對齊：頂」到「表芯」的div爲了使內容顯示器頂部沒有空白！

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

謝謝

來源

2012-07-24 16:48:41

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

回答

相關問題