CSS table default padding or margin

Question

Today it's my first time I'm playing around with tables and I have noticing that the table and tr and td tags have a little space between them, like 1 px or so.

So here is my problem :

There is my code :

<table id="upload_box_container">
    <tr>
        <td class="border_bottom_1px">hi1</td>
        <td class="border_bottom_1px">hi2</td>
    </tr>
</table>

(upload_box_container - it's just background color and border color)

(border_bottom_1px - as it's name it only gives bottom border with 1px size)

and there is a picture of how it displays: http://postimage.org/image/16wz2ao78/

My question is

• why there is a space between the two bottom borders

• and why there is a space in the sides of the table (like padding) and the borders don't touch the table border

thanks.

Answer 1

Define

table { border-spacing:0; }

and it should render in the way you want.

Answer 2

You need to reset the default styles applied by the browser.

Try at the top of your css file:

table, table tr, table td { padding:none;border:none;border-spacing:0;}

And check into some popular CSS resets out there:

http://meyerweb.com/eric/tools/css/reset/ http://developer.yahoo.com/yui/reset/

Answer 3

I prefer to use this approach:

table { table-layout:fixed; border-collapse:collapse; }