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

Вы должны установить свойство border-radius для тех Td элементов в 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 */ 
} 

Теперь вы не должны видеть переполненные фоны, например. (обратите внимание, что свойство переполнения бесполезно в этом случае)

Надеюсь, это поможет

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 { 

}