CSS - 显示表格和表格单元格 div 上的水平空白区域答案

【问题标题】：CSS - Horizontal white space on display table and table-cell divsCSS - 显示表格和表格单元格 div 上的水平空白区域
【发布时间】：2015-04-29 01:24:20
【问题描述】：

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

这里是Fiddle

布局应该是两列：一右一左，后一列更大。问题是在右侧的 div 上，我经常看到显示的内容，并且所有对齐都显示得很好。在左边，它的内容较低，我的意思是它似乎有一个大约 5px 的 padding-top，但根本没有 padding。空格位于左侧表格单元格 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; }

我在 Internet 和 StackOv 上搜索了有同样问题的其他人，但没有找到有同样问题的人。相似，但根本不一样！

我尝试为所有元素赋予边框折叠/边框间距（每个元素一次，然后是“表格”一个，然后是“表格单元格”元素，然后是三个元素）：什么都没有。

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

有人知道吗？

【问题讨论】：

你能把它放在一个jsfiddle中吗？如果我们能看到，就更容易提供帮助
当然，问题已更正！用小提琴它似乎可以工作，但我在我的网页上尝试过，我真的无法让它工作！！
Chrome 的元素检查器是否会显示应用到您不期望的元素的任何 CSS？
Nothing：我的意思是，在 FF (firebug) 和打开开发者工具的 Chrome 中，没有任何线索可以说明出现空白的原因。使它工作的唯一方法是给表格单元格元素一个垂直对齐：顶部属性！

标签： html css css-tables

【解决方案1】：

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

【讨论】：

【解决方案2】：

好的，我想通了：我需要将“vertical-align:top”添加到“table-cell”的 div 中，以使内容显示在顶部没有空白！

我知道它可以工作，但我真的无法让它在我的网页上工作，即使没有 CSS（只是我需要的......）。（FF 13，铬 20）。

谢谢

【讨论】：

【解决方案3】：

“main_contents_left”类的 div 的内容具有不包含子行或孙子单元格的表格标签，这可能与它有关吗？

这里是我的jsFiddle的链接，如果你有兴趣的话

【讨论】：