Table border size - CSS/HTML

Question

Is it possible to extend a cell's border width/height so that it joins with the border of surrounding table?

I have this:

<table width="270px" style="border: 1px;">
   <tbody width="270px">
        <tr>
            <th colspan="3" style="border: 1px;">
                Header
            </th>
        </tr>
        <tr>
            <td style="border: 1px;" valign="middle">
                Left-hand cell
            </td>  
            <td valign="middle">
                Right-hand cell
            </td>
            <td>
                Left-hand cell
            </td>
        </tr>
    </tbody>
</table>

What is happening is the inner borders don't meet the outer border - there is a slight gap.

Can I get these border to meet?

Just add cellspacing='0' to your table and use padding for cells. — AR., Jun 16 '11 at 23:40
Thanks AR that solved the issue. Do you want to submit it as an answer so I can mark it as the answer? — travega, Jun 17 '11 at 02:48

score 4 · Answer 1 · edited May 23 '17 at 10:29

4

Have a look at CSS border-collapse.

table 
{ 
    border-collapse: collapse; 
}

Also, have a look at this answer on how to achieve cellpadding and cellspacing in CSS.

From Ant P.'s answer:

... just for completeness:

padding → cellpadding

border-spacing → cellspacing

border-collapse → no HTML equivalent

It's also worth remembering that you can set separate horizontal and vertical values for the CSS ones e.g. border-spacing: 0 1px.

edited May 23 '17 at 10:29

Community

1
1

answered Jun 16 '11 at 23:37

Town

14,706
3
48
72

1

[No, not 'and cellspacing'](http://stackoverflow.com/questions/339146/why-are-cellspacing-and-cellpadding-not-css-styles). – Town Jun 16 '11 at 23:41
border-collapse will do the trick. I never worked out if this should be applied to table or td so I always do both. Enlighten me? – Marty Jun 16 '11 at 23:44
@Marty Wallace: `table` (see that link) although both won't hurt! :) – Town Jun 16 '11 at 23:47
Hi border-collapse has actually removed all other effective CSS in the borders. Cellspacing was all I actually needed thanks. – travega Jun 17 '11 at 03:24
See Ant P.'s answer in the link. border-spacing is the CSS equivalent. It's best practice to separate design from content. – Town Jun 17 '11 at 08:04

score 2 · Accepted Answer · answered Jun 17 '11 at 00:50

Try this and let me know:

<table width="270px" style="border: 1px;" cellspacing="0" cellpadding="0">
   <tbody width="270px">
        <tr>
            <th colspan="3" style="border: 1px;">
                Header
            </th>
        </tr>
        <tr>
            <td style="border: 1px;" valign="middle">
                Left-hand cell
            </td>  
            <td valign="middle">
                Right-hand cell
            </td>
            <td>
                Left-hand cell
            </td>
        </tr>
    </tbody>
</table>

Table border size - CSS/HTML

2 Answers2