不明原因的额外空间,可能填充在表内的表

Question

不明原因的额外空间,可能填充在表内的表

这是我正在进行布局的实验.我有很多问题来定位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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

VKe*_*Ken 4

你是这个意思吗？

\n\n

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

\n\n

我已经编辑了您的代码，并通过删除内联样式删除了相关红色下绿色的额外“填充”，然后在 css 中添加了一些指向#problem_cell_table.

\n\n

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

\n\n

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

\n\n

在我完成的示例中，我通过将内部表的 css 设置为“作弊”，height: 100%以便在发生错误计算时它将扩展以适应高度。

\n\n

请稍等一下，我将<div>在答案中添加更多样式方法。

\n\n

编辑：

\n\n

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

\n\n

请记住首先使用 CSS 重置样式表！

\n\n

CSS:\n

\n\n

<style>\nbody{\n    background: black;\n}\n\n.wrapper{\n}\n\n.container{\n    width: 1500px;\n}\n\n.content-table {\n    border: 25px solid #fff;\n    overflow: hidden;\n    background: #fff;\n}\n\n.content-column {\n    margin-right: 25px;\n    float: left;\n    height: 475px;\n}\n\n.content-column.last {\n    margin-right: 0;\n}\n\n.first, .third, .last {\n    width: 425px;\n    background-color: green;\n    margin-right: 25px;\n}\n\n.top{\n    height: 225px;\n    border-bottom: 25px solid blue;\n}\n\n.left {\n    height: 225px;\n    width: 200px;\n    border-right: 25px solid blue;\n}\n\n.content-column.second {\n    width: 100px;\n    background-color: red;\n}\n\n.last .left {\n    background-color: red;\n}\n\n.last .left .top {\n    height: 100px;\n    border-bottom: 25px solid blue;\n}\xe2\x80\x8b\n</style>\n

Run Code Online (Sandbox Code Playgroud)\n\n

HTML：

\n\n

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

Run Code Online (Sandbox Code Playgroud)\n

归档时间：	13 年，3 月前
查看次数：	19562 次
最近记录：	8 年，5 月前