html - 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