CODEWITHSUNDEEP
htmlcss
Mcloving
Mcloving

Reputation: 1410

Table spacing in html

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: enter image description here

Upvotes: 2

Views: 92

Answers (6)

Alex Char
Alex Char

Reputation: 33218

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.

Upvotes: 2

Pooshonk
Pooshonk

Reputation: 1324

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%;
}

Upvotes: 2

chris
chris

Reputation: 4867

use normalize.css or an css reset Also I would add 

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

Upvotes: 2

G.L.P
G.L.P

Reputation: 7207

Try like this: LINK

CSS:

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

Upvotes: 2

Mooseman
Mooseman

Reputation: 18891

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/

Upvotes: 2

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

Add Border Collapse for table.

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

DEMO

Upvotes: 2

Related Questions