Question

I’m a new web developer (obviously). When I first noticed this issue, I thought it might be something quirky with the site I was working on. Since then I’ve worked on several other sites and noticed the same thing.

When I use the CSS property “border-collapse:collapse” to stylize HTML tables, sometimes the far-right border gets cut off when I load the page (both in FF and IE). Strangely enough, when I scroll up and down it occasionally fixes itself without reloading the page. It usually happens toward the bottom-right corner of the table, as the second screenshot indicates.

screenshot1

screenshot2

Here’s my HTML/CSS:

<table width="730" border="0" cellpadding="4" cellspacing="0" style="border-collapse: collapse;">
  <tr>
    <td style="border:1px solid #ff9900;"></td>
    <td style="border:1px solid #ff9900;"></td>
    <td style="border:1px solid #ff9900;"></td>
  </tr>
.
.
.
</table>

What gives? Any ideas? Thanks for your time & effort!

Answer 1

Moz has problems with border-collapse:collapse; going back 10 years or so, it keeps getting fixed and then becoming buggy again (see bug track here and here).

Try adding a border to the table element like so:-

#your-table-name {border-collapse : collapse; border : 1px solid orange;}

#your-table-name td {border: 1px solid orange;}

Please also note that this is a coding question and should really go to stackoverflow. Its also helpful to post the browser version you’re using.