Table creates unwanted grid

So my CSS and HTML is a bit rusty, haven't touched it in 4-5 years.
And I bumped into this little problem I just can't explain...

I'm not sure if you can see it properly on this image. If not, you can see it on the forum itself right here/.

If you look very close, you can see a grid. There are white lines between each column and row. White lines of a pixel.
Thing is... It only happens when I use a border. If I remove the bottom border in the CSS, it is perfectly fine, no grid is formed.
But once I use a border, it forms this unwanted grid to show the table.

Here's the CSS for that specific part.

Code:

.pun table.table td,  .pun .main table td.tc2 {
   border-bottom: 2px solid #C9C9C9;
   background-color: #D6D6D6;
   }

Take a look at this:

Code:

.pun table.table td {
    background-color: #fbfbfb;
    border-color: #ddd;
    border-style: solid none none solid;
    border-width: 1px;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
    line-height: 130%;
    padding: .6em 0 .7em;
}

Notice there are ones for left and right.

Ofcourse... Should have looked at the original CSS. Only the properties that I write are overwritten and it keeps the original if I don't add the property.
Should have know.

Thank you, problem solved.