CSS: If I have 1 table within another, is there a way to take away the gap between the two table

Question

I have a table within another table, that look like below. What I want is to have the +0 all line up vertically. I have them float:right. The problem is there is a small gap, as you can see, between the two tables, making the +0 of the inner table indent inward a bit. Is there a way to take out these gap?

EDIT Image is taken down by OP

Answer 1

Make sure you have no spacing/padding in the HTML:

<table border="0" cellspacing="0" cellpadding="0">
...
</table>

and in the CSS:

table, th, td { margin: 0; padding: 0; }

This shoud work.

Answer 2

Not to be smug or unhelpful, but you shouldn't really be using tables for that layout anyhow. This looks more like an unordered list than table data (i.e. a spreadsheet).

If you're using tables for anything other than displaying multiple rows of data where each row has the same number of columns, you're kludging layout and content into a mess that will continually give you headaches further down the road.

You could accomplish by nesting a child list inside the parent like this:

<ul class='post'> <!-- outer list -->
    <li>
        <img src='profile.jpg' alt='profile' />
        <span class='name'>Thing Pham:</span>
        <span class='rating'>+0</span>
        <p>Hey hey</p>
        <ul class='comments'> <!-- inner list -->
            <li>
                <img src='profile.jpg' alt='profile' />
                <span class='name'>Thing Pham:</span>
                <span class='rating'>+0</span>
                <p>Hey there</p>
            </li>
            <li>
                <img src='profile.jpg' alt='profile' />
                <span class='name'>Thing Pham:</span>
                <span class='rating'>+0</span>
                <p>What do I see next?</p>
            </li>
        </ul> <!-- /inner list -->
        <a class='comment-link' href='#'>Comment</a>
    </li>
</ul> <!-- /outer list -->

Then use CSS to give everything the appropriate properties for layout.

That said, my guess is that your outer table has a padding on the right which is causing the inner tables to be pushed in the same amount as the "+0" in the outer table. If you give the outer table padding-right:0; it should solve the problem, but the "+0"s will then be butted right up against the right border. You can shift them back by giving a right margin or right padding to whatever element they're in.

You can also specify border-collapse:collapse; (or remove the right border on the inner tables) to get rid of the 'double border' effect that might happen when the padding is removed.