Login/Register
Unexplained Extra Space, Possibly Padding Surrounding a Table within a Table
Asked Answered
Solved htmlhtml-tablepaddingspacing
F

1

8

This is an experiment I'm working on for a layout. I had a lot of issues positioning divs to achieve this effect, so I turned to the old standby, table cascades. My problem here is that that last upper box has extra padding in all 3 browsers and I cannot seem to CSS or HTML it away no matter what I try. The red boxes should be flush over the green bits you see surrounding them and there shouldn't be a 1px visible green line to the right of the blue row between the red boxes. Any insight would be extremely appreciated.

<!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>
Fielding answered 16/10, 2012 at 14:40 Comment(2)
You can use your browser's development tools to analyse the padding/margins etc. – Market
I was in Firebug and couldn't figure it out. Vken got me, though. :) – Fielding
O
4

Do you mean this?

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

I've edited your code and removed the extra 'padding' of green under red in question, by removing inline-styling, then added some styles in css pointing to the #problem_cell_table.

I suggest you remove all your inline styling and shift them to the stylesheet. Inline-styling overrides all stylesheet code. That's bad and also explains why you don't get any effect from stylesheet changes.

As to why there's a padding, it's because your main table's height that is wrapping all the rows, cells, and inner-tables, is higher than the declared row height added together. The cells in your all the rows automatically adjusts it's size to compensate for pixels that doesn't add up to your total declared of 525px.

In the example I've done, I "cheated" by setting css of the inner-table to height: 100% so it will expand to fit the height, should miscalculations occur.

Give me a moment, I'll add more to the <div> styling methods in my answer.

Edit:

Ok here my attempt at the layout using <div> and CSS. http://jsfiddle.net/XbFcJ/

Remember to use a CSS Reset Stylesheet first!

The 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>

The 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>​
Official answered 16/10, 2012 at 15:3 Comment(2)
Yes, that's the cell that's problematic. I get those green top and bottom spaces showing through the red parts. I don't understand where my math is failing on that section. Can you please explain further? Thanks! – Fielding
@Fielding in your last big green table the .container height is 475px, but the sum of the <tr> only adds up to 450px. You've missed out 25px somewhere. So the table will do some auto calculation to add in padding to vertically-center the small red table. If you change the small red-table's height, that table's content's height, cell and rows, all to a total height of 250px it will sum up to 475px, and the weird padding will be gone. – Official

© 2022 - 2024 — McMap. All rights reserved.