Table cell's spacing

Question

I'm trying to apply background-color to a table-cells. jsFiddle

<table>
<tr>
            <td>
                text
            </td>
            <td>
                text
            </td>
            <td>
                text
            </td>
</tr>
</table>


td{
    background-color: rgb(172,0,20);
}

How can I remove spacing between the table cells?

score 1 · Accepted Answer · answered Feb 12 '14 at 04:42

1

Just add the border-collapse property for the table:

CSS

table{
    border-collapse:collapse;
}
td{
   background-color: rgb(172,0,20);
}

http://jsfiddle.net/DKNyf/1/

answered Feb 12 '14 at 04:42

leigero

3,233
12
42
63

score 0 · Answer 2 · answered Feb 12 '14 at 04:41

0

try using like this

<table cellspacing="0" cellpadding="3" border="0">
<tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
</tr>
</table>

answered Feb 12 '14 at 04:41

PravinS

2,640
3
21
25

score 0 · Answer 3 · edited May 23 '17 at 12:29

The space between cells is called cellspacing and can be assigned in the html by using:

<table cellspacing="0">
<tr>
            <td>
                text
            </td>
            <td>
                text
            </td>
            <td>
                text
            </td>
</tr>
</table>

see: http://www.w3schools.com/tags/att_table_cellspacing.asp

You can also do this through CSS, see: Set cellpadding and cellspacing in CSS?