Table border size - CSS/HTML

html css html-table border

27,873

Solution 1

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>

Solution 2

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.

27,873

Author by

travega

Updated on July 09, 2022

Comments

travega almost 2 years

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?

AR. almost 13 years

Just add cellspacing='0' to your table and use padding for cells.
travega almost 13 years

Thanks AR that solved the issue. Do you want to submit it as an answer so I can mark it as the answer?

Town almost 13 years

No, not 'and cellspacing'.
Marty almost 13 years

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?
Town almost 13 years

@Marty Wallace: table (see that link) although both won't hurt! :)
travega almost 13 years

Hey thanks for your answer it was close to what I was looking for. Nice work!
travega almost 13 years

Hi border-collapse has actually removed all other effective CSS in the borders. Cellspacing was all I actually needed thanks.
Town almost 13 years

See Ant P.'s answer in the link. border-spacing is the CSS equivalent. It's best practice to separate design from content.
kheya almost 13 years

No problem. Glad that it helped!