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上的水平空白区域

回答

相关问题