帶有圓角和漸變背景的HTML表格

Question

我有一張桌子，上面有一些CSS，用於在第一行（對於列標題）中使用圓角和漸變背景進行樣式表，但儘管如此，我指定overflow: hidden;

HTML：

<table id="tblIncidentQueue" class="DataTable"> 
     <tr class="TableHeaderFooter"> 
      <td colspan="5"> 
       <strong>Show </strong> 
       <asp:DropDownList ID="drpNumOfResults" runat="server"> 
        <asp:ListItem Text = "10" Value="10" ></asp:ListItem> 
        <asp:ListItem Text = "20" Value="20" ></asp:ListItem> 
        <asp:ListItem Text = "50" Value="50" ></asp:ListItem> 
        <asp:ListItem Text = "100" Value="100" ></asp:ListItem> 
        <asp:ListItem Text = "All" Value="All" ></asp:ListItem> 
       </asp:DropDownList> 
       <strong> entries</strong> 
      </td> 
      <td align="right"> 
       <img src="../images/Icons/Refresh.png" border="0" /> 
       <img src="../images/Icons/Down.png" border="0" /> 
      </td> 
     </tr> 
    </table> 

CSS：

.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; 
} 

.TableHeaderFooter 
{ 
    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 */ 
     overflow: hidden; 
} 

任何幫助，不勝感激！

Answer 1

您必須爲TableHeaderFooter中的那些td元素設置屬性border-radius。

.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 */ 
} 

現在你不應該看到任何溢出的背景，例如梯度（注意overflow屬性在這種情況下是沒用的）

我希望它能幫助

Answer 2

將.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 { 

}