CSS加边框表

Question

请参阅本JSFiddle

的问题是在Firefox有一个边框向下表的左侧，在Chrome和Safari边境下降表的右侧。我不希望边界在边上，只在桌面标题行上。

我似乎无法摆脱它。有没有人有任何建议，我怎么可以去诊断这个？

这里是我的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); 
} 

谢谢！

Answer 1

边框颜色从这个标签来：

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

如果你删除它，然后在这一个摆脱的背景图片：

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

然后更改背景颜色在这一个到#CDCDCD

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

你应该看到一些像你正在寻找的东西。

DEMO