Table spacing in html

Question

For what ever reason, I get a small gap in between the two TD cells (Lines dont touch). There is no padding or margin on that side... I did this collapsing idea.

Why is it there? http://jsfiddle.net/CKy6U/

My html:

<table>
    <tr>
        <td>
            TEST CELL 1
        </td>
         <td>
             TEST CELL 2
        </td>
    </tr>
</table>

my CSS:

table
{
    width: 100%;
}
tr
{
    border-bottom: 1px solid Black;
}

td
{
    border-collapse: separate;
    border-spacing: 0px;
    border-left: 1px solid Black;
    border-bottom: 1px solid Black;
    padding: 3px;
    width: 50%;
}

My Result:

Answer 1

Add Border Collapse for table.

table
{
width: 100%;
border-collapse:collapse;
}

DEMO

Answer 2

You have to add border-collapse: collapse in your table or cellspacing="0" in your html table.

css

table {
  width: 100%;
  border-collapse: collapse;
}

fiddle

html:

<table cellspacing="0">

fiddle

Both solutions should work. But use border-colapse cause as @Mooseman comment cellspacing is obsolete in html5.

Answer 3

Add border-right: 0px; to and remove border-collapse: separate from the td . Add border-collapse: collapse to the table .

Fiddle: http://jsfiddle.net/CKy6U/7/

Answer 4

Try like this: LINK

CSS:

 table {
        width: 100%;
        border-collapse:collapse;
    }

Answer 5

使用normalize.css或css reset我也会添加

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

Answer 6

Remove the border-collapse on the td and add it to the table

table{
    width: 100%;
    border-collapse: collapse;
}

tr{
    border-bottom: 1px solid black;
}

td{
    border-spacing: 0px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    padding: 3px;
    width: 50%;
}