CSS为表添加边框

Question

Please refer to this JSFiddle

The issue is in Firefox there is a border down the left side of the table and in Chrome and Safari the border goes down the right side of the table. I don't want the border down the side at all, only on the table header row.

I can't seem to get rid of it. Does anyone have any suggestions on how I can go about diagnosing this?

Here's my CSS:

body {background-color:black;}

table.tablesorter {
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 15px;
    font-size: 12pt;
    width: 100%;
    text-align: left;
    border-collapse: collapse;

}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 10pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    color: white;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}
table.tablesorter thead tr .headerSortUp {
    background: url(http://tablesorter.com/themes/blue/desc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown {
    background: url(http://tablesorter.com/themes/blue/asc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    background-color: #8dbdd8;
}
table.tablesorter tr.parent-row > td {

    /* IE10 Consumer Preview */
    background-image: -ms-linear-gradient(bottom, #253355 0%, #587993 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(bottom, #253355 0%, #587993 100%);
    /* Opera */
    background-image: -o-linear-gradient(bottom, #253355 0%, #587993 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #253355), color-stop(1, #587993));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(bottom, #253355 0%, #587993 100%);
    /* W3C Markup, IE10 Release Preview */
    background-image: linear-gradient(to top, #253355 0%, #587993 100%);
    border: 0px;
    border-collapse: collapse;
}

table.tablesorter tr.parent-row-details > td {
    background: black;
    border: 0px;
    border-collapse: collapse;
}
table.tablesorter-child thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6E66E;
    border: 1px solid #000;
    font-size: 18pt;
    padding: 4px;
}
table.tablesorter-child tbody tr td {
    color: black;
}

table.tablesorter tbody tr.parent-row {
    font-size: 12px;
    vertical-align: center;
}
table.tablesorter tbody tr.parent-row td {
    vertical-align: middle;
}

td.tdd { 
    horizontal-align:right;
}

.arrow-rotate {
    -moz-transform: rotate(90deg);
    -webkit-transform:rotate(90deg); 
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
}

Thanks!

Answer 1

The border color is coming from this tag:

table.tablesorter {
    background-color: #CDCDCD;
}

If you remove it, and then get rid of the background image in this one:

table.tablesorter thead tr .header {
  background: url("http://tablesorter.com/themes/blue/bg.gif") no-repeat scroll right center rgba(0, 0, 0, 0);
} 

and then change the background color on this one to the #CDCDCD

table.tablesorter thead tr th, table.tablesorter tfoot tr th {
  background-color: #cdcdcd;
}

You should see something like what you are looking for.

DEMO