如何使用CSS摆脱gridview的列边框

Question

我正在尝试在ASP.NET中手动设置gridview样式，使其看起来像默认的gridview样式之一。默认样式是这样的 -

我已经非常接近了。将自己的样式应用到准系统gridview控件后，它看起来像这样 -

但我似乎无法删除Gridview标题部分中的白色边框。

我的SCSS看起来像这样 -

table{
    &.table-grid{
        color:Black;
        background-color:White;
        border-width: 1px;
        border-style:None;
        border-spacing: 0px;
        font-size:10pt;
        width:100%;
        border-collapse:collapse;
        margin-left:auto;
        margin-right: auto;
        td {
            border: none;
            border-top: 1px solid $table-bg-color;
        }
        tr {
            border-collapse:collapse;
            &:first-child{
                color:White;
                background-color:$table-bg-color;
                font-weight:bold;
            }
            th{
                border-collapse:collapse;
            }
        }
    }
}

我的gridview属性是 -

<asp:GridView ID="gv" runat="server" CssClass="table-grid" EnableViewState="false" cellspacing="0" cellpadding="4" border="0" AutoGenerateColumns="false">

谁能告诉我如何摆脱这些白色边框？

这是一个JsFiddle Demo

Answer 1

只是稍微扩展上一个答案：

th{
border-collapse:collapse;
border-width: 0;
text-align: left;
}

让列标题排列得很好:)

Answer 2

尝试

th{
                border-collapse:collapse;
                border-width: 0;
            }