带圆角和渐变背景的HTML表格

我有一个带有一些CSS的表格，用于在表格的第一行（列标题）设置圆角和渐变背景的样式，但尽管我指定了

overflow:hidden

，渐变的效果在圆角外溢出

HTML:

---

非常感谢您的帮助

将.TableHeaderFooter中的所有背景代码放入.DataTable。 边缘将消失

.DataTable {
    margin: 10px;
    -moz-border-radius : 10px; /* Firefox */
    -webkit-border-radius : 10px; /* Safari & Chrome */
    -khtml-border-radius : 10px; /* Linux browsers */
    border-radius : 10px; /* CSS3 compatible browsers */
    border-style: solid;
    border-width: 1px;
    border-color: #cccccc;
    padding: 0px;
    border-spacing: 0px;
    overflow: hidden;
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

.TableHeaderFooter {

}

---

您必须为TableHeaderFooter中的那些td元素设置属性

边界半径

.TableHeaderFooter td:first-child {
     border-radius : 10px 0px 0px 10px; /* rounds the top and bottom left corner */
}

.TableHeaderFooter td:last-child {
     border-radius : 0px 10px 10px 0px; /* rounds the top and bottom right corner */
}

现在，您不应该看到任何溢出的背景，例如渐变（注意，溢出属性在这种情况下是无用的）

我希望它有帮助
这是在特定的浏览器中吗？或者在所有浏览器中？如果您提供生成的HTML，我们会更容易帮助您，最好还提供一个演示（请参见：）。嗨-谢谢，我不希望整个表都有渐变-会有其他行我不希望渐变。它必须包括ASP吗？你可以通过做ul列表来获得结果。
.DataTable {
    margin: 10px;
    -moz-border-radius : 10px; /* Firefox */
    -webkit-border-radius : 10px; /* Safari & Chrome */
    -khtml-border-radius : 10px; /* Linux browsers */
    border-radius : 10px; /* CSS3 compatible browsers */
    border-style: solid;
    border-width: 1px;
    border-color: #cccccc;
    padding: 0px;
    border-spacing: 0px;
    overflow: hidden;
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

.TableHeaderFooter {

}

.TableHeaderFooter td:first-child {
     border-radius : 10px 0px 0px 10px; /* rounds the top and bottom left corner */
}

.TableHeaderFooter td:last-child {
     border-radius : 0px 10px 10px 0px; /* rounds the top and bottom right corner */
}