无法解释的额外空间，可能是在表中的表周围填充答案

【问题标题】：Unexplained Extra Space, Possibly Padding Surrounding a Table within a Table无法解释的额外空间，可能是在表中的表周围填充
【发布时间】：2012-10-06 16:54:30
【问题描述】：

这是我正在进行的布局实验。我在定位 div 来实现这个效果时遇到了很多问题，所以我转向了旧的备用表级联。我的问题是，最后一个上框在所有 3 个浏览器中都有额外的填充，无论我尝试什么，我似乎都无法将 CSS 或 HTML 去掉。红色框应与您看到的围绕它们的绿色位齐平，并且红色框之间的蓝色行右侧不应有 1px 可见的绿线。任何见解将不胜感激。

<!doctype html>
<html>
<head>
<style>
 table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}

td table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}

img { display: block; }
</style>
</head>
<body style="background-color: black;">
<table style="background-color: white; height: 525px; width: 3200; padding-top: 25px;  padding-bottom: 25px;">
<tr>
 <td colspan="1" style="width: 350px;">
   <table class="container" style="height: 475px; width: 350px; margin-left: 25px; margin-right: 25px;">
    <tr>
  <td style="background-color: green; height: 225px; width: 350px;" colspan="3">

  </td>
</tr>
<tr>
  <td style="background-color: blue; height: 25px; width: 350px;" colspan="3">

  </td>
</tr>
<tr>
  <td style="background-color: green; height: 200px; width: 175px;">

  </td>
  <td style="background-color: blue; height: 200px; width: 25px;">

  </td>
  <td style="background-color: green; height: 200px; width: 125px;">

  </td>
</tr>
</table>
</td>

<td colspan="1" style="width: 125px;">
<table class="container" style="height: 475px; width: 125px; margin-right: 25px;">
<tr>
  <td style="background-color: red; height: 475px; width: 125px;">

  </td>
</tr>
</table>
</td>

<td colspan="1">
<table class="container" style="height: 475px; width: 450px; margin-right: 25px;">
<tr>
  <td style="background-color: green; height: 25px; width: 225px;">

  </td>
  <td style="background-color: blue; height: 225px; width: 25px;" >

  </td>
  <td style="background-color: green; height: 225px; width: 225px;" >

  </td>
</tr>
<tr>
  <td style="background-color: blue; height: 25px; width: 450px;" colspan="3">

  </td>
</tr>
<tr>
  <td style="background-color: green; height: 200px; width: 450px;" colspan="3">

  </td>
</tr>
</table>
</td>

<td colspan="1">
<table class="container" style="height: 475px; width: 400px; margin-right: 25px;">
<tr style="height: 225px;">
  <td style="background-color: green; height: 225px; width: 275px;">

   <table style="width: 100%; height: 225px;">

    <tr>
         <td style="height: 100px; width: 225px; background-color: red;">

         </td>      
        </tr>

        <tr>
         <td style="background-color: blue; height: 25px; width: 225px;">

         </td>
        </tr>      

        <tr>
         <td style="height: 100px; width: 225px; background-color: red;">

         </td>      
        </tr>

       </table>       

  </td>
  <td style="background-color: blue; height: 225px; width: 25px;" >

  </td>
  <td style="background-color: green; height: 225px; width: 100px;" >

  </td>
</tr>
<tr>
  <td style="background-color: blue; height: 25px; width: 400px;" colspan="3">

  </td>
</tr>
<tr>
  <td style="background-color: green; height: 200px; width: 400px;" colspan="3">

  </td>
</tr>
</table>
</td>

</table>
</td>

</table>

</body>
</html>

【问题讨论】：

您可以使用浏览器的开发工具来分析填充/边距等。
我在 Firebug 中无法弄清楚。不过，Vken 得到了我。 :)

标签： html html-table padding spacing

【解决方案1】：

你是这个意思吗？

http://jsfiddle.net/Nq8Us/1/

我已经编辑了您的代码，并通过删除内联样式删除了有问题的红色下多余的绿色“填充”，然后在 css 中添加了一些指向 #problem_cell_table 的样式。

我建议您删除所有内联样式并将它们转移到样式表中。内联样式覆盖所有样式表代码。这很糟糕，也解释了为什么样式表更改没有任何效果。

至于为什么会有填充，这是因为包含所有行、单元格和内表的主表的高度高于声明的行高加在一起。您所有行中的单元格会自动调整其大小以补偿不等于您声明的525px 总数的像素。

在我所做的示例中，我通过将内表的 css 设置为 height: 100% 来“作弊”，因此如果发生计算错误，它将扩展以适应高度。

请稍等，我将在我的回答中为<div> 样式方法添加更多内容。

编辑：

好的，我尝试使用 <div> 和 CSS 进行布局。 http://jsfiddle.net/XbFcJ/

记得先使用 CSS 重置样式表！

CSS：

<style>
body{
    background: black;
}

.wrapper{
}

.container{
    width: 1500px;
}

.content-table {
    border: 25px solid #fff;
    overflow: hidden;
    background: #fff;
}

.content-column {
    margin-right: 25px;
    float: left;
    height: 475px;
}

.content-column.last {
    margin-right: 0;
}

.first, .third, .last {
    width: 425px;
    background-color: green;
    margin-right: 25px;
}

.top{
    height: 225px;
    border-bottom: 25px solid blue;
}

.left {
    height: 225px;
    width: 200px;
    border-right: 25px solid blue;
}

.content-column.second {
    width: 100px;
    background-color: red;
}

.last .left {
    background-color: red;
}

.last .left .top {
    height: 100px;
    border-bottom: 25px solid blue;
}
</style>

HTML：

<body>
<div class="wrapper">
    <div class="container">
        <div class="content-table">
            <div class="content-column first">
                <div class="top">
                </div>
                <div class="bottom">
                    <div class="left">
                    </div>
                </div>
            </div>
            <div class="content-column second">
            </div>
            <div class="content-column third">
                <div class="top">
                    <div class="left">
                    </div>
                </div>
                <div class="bottom">
                </div>
            </div>
            <div class="content-column last">
                <div class="top">
                    <div class="left">
                        <div class="top">
                        </div>
                    </div>
                </div>
                <div class="bottom">
                </div>
            </div>
        </div>
    </div>
</div>
</body>

【讨论】：

是的，这是有问题的单元格。我通过红色部分显示了那些绿色的顶部和底部空间。我不明白我的数学在那个部分失败了。你能进一步解释一下吗？谢谢！
@user1750369 在你的最后一张大绿表中，.container 的高度是 475px，但 <tr> 的总和仅加起来为 450px。您在某处错过了25px。因此该表将进行一些自动计算以添加填充以垂直居中红色小表。如果你改变小红表的高度，该表的内容高度、单元格和行，总高度为250px，总高度为475px，奇怪的填充将消失。
非常感谢，VKen！这很有帮助。