css html tables left and right border

user1245706

I’m trying to write some css that will make it so my html table only has borders horizontally, and no borders vertically in between columns.

here is what i have so far:

@charset "utf-8";
/* CSS Document */

<style type="text/css">

box-table-a{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 45px;
    width: 480px;
    text-align: left;
    /*border-width: 0px;
    border-left: 0px;
    border-right: 0px;*/
    border-collapse: collapse;
}

#box-table-a th{
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe;
    border-right:1px solid #b9c9fe;
    border-left:1px solid #b9c9fe;
    border-top: 4px solid #aabcfe;
    border-bottom: 1px solid #fff;
    color: #039;
}
#box-table-a td{
    padding: 8px;
    background: #e8edff; 
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid transparent;
}
#box-table-a tr:hover td{
    background: #d0dafd;
    color: #339;
}
</style>

This results in a table with white borders on all sides. Any ideas what I’m doing wrong?

EDIT
I can get it to do what I want here: http://jsfiddle.net/QZwt5/26/
but when I take this exact table, and exact css into dreamweaver and then ftp to my server I am still getting thin white lines in-between each cell.

Also just noticed that if I turn off normalized in fiddle that the borders appear on the table there.

Everything is running on an ubuntu server, I’m building it in winXP and then ftp to apache, so there might be some permission problems interfering with the CSS?