Removing spacing between TD elements

Question

There are annoying gap between my td elements. I want it to be joined together.

http://jsfiddle.net/zj6mk/4/

I have tried different elements, but none have worked:

 border-collapse:collapse;
 cellspacing:0;
 border-spacing:0;

Answer 1

Add cellspacing="0" cellpadding="0" to table

<table style="height: 400px; width: 100%;" cellspacing="0" cellpadding="0">

See Demo

Answer 2

add

html,body{

    margin:0;
    padding:0;
}

so outer white spaces will be removed and

<table style="height: 400px; width: 100%;" cellspacing="0" cellpadding="0">

so inner white spaces will be removed FIDDLE

Answer 3

Using this:

<table style="height: 400px; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
    <td style="vertical-align: top;">
        <div style="height: 200px;">aa</div>
        <div style="height: 200px;">aa</div>
    </td>
    <td style="vertical-align: top;cellspacing:0;">
        <div style="height: 350px">aa</div>
        <div style="height: 50px">aa</div>
    </td>
</tr>

As you can see I added cellpadding="0" & cellspacing="0" and the gap disappears.

Here the JsFiddle for you: http://jsfiddle.net/zj6mk/7/

Or simpler and more "attractive" - use width:100%; in your css for your div.

Answer 4

<table style="height: 400px; width: 100%;">
<tr>
    <td style="vertical-align: top;padding:0px">
        <div style="height: 200px;">aa</div>
        <div style="height: 200px;">aa</div>
    </td>
    <td style="vertical-align: top;padding:0px">
        <div style="height: 350px;">aa</div>
        <div style="height: 50px;">aa</div>
    </td>
</tr>

try adding padding:0px to td