Phantom borders appear after an element is added to the page

I am having a slight issue with the UI on my project. I am using jQuery templating to add elements to the page after a called process has finished. I have a table on the page and only the header of the table has borders. Here is the CSS setting for the header border:

#mainContent thead tr td{
    border: 1px solid #bbbbbb;
    border-collapse: collapse;
    background-image: url(../images/columnheader_bg.png);
    background-repeat: repeat-x;
    background-color: #e2e2e2;
    text-dec开发者_JAVA技巧oration: underline;
    font-weight: bold;
    padding: 5px;
}

After the called process has finished and the element is added through the jQuery templating, the borders for the header appear on the first row of the body of the table. It is hard to explain so I captured a screen shot video at http://screencast.com/t/LD8SvpgV (notice that at the end of the video under 'Status' and 'Action' the borders appear).

Anyone have any idea what is causing this and how I can remove it?

Cheers,

Kia

It is hard to pin point the exact problem with the details you provide.

Does it only happen on a specific browser?

I would advice you to install Firebug add-on for Firefox and do your investigation from there.