我在一个表中有 3 个 gridview,3 个
代码:
<style type="text/css">
.CSSTable
{
margin: 0px;
padding: 0px;
width: 60%; /*Fits the <div>*/
box-shadow: 10px 10px 5px #888888;
border: 1px solid #000000;
}
.CSSTable table
{
border-collapse: collapse;
border-spacing: 0;
width: 100%; /*sets table all aligned*/
height: 100%;
margin: 0px;
padding: 0px;
}
.CSSTable tr:last-child td:last-child
{
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.CSSTable table tr:first-child td:first-child
{
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px;
}
.CSSTable table tr:first-child td:last-child
{
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
border-top-right-radius: 0px;
}
.CSSTable tr:last-child td:first-child
{
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.CSSTable tr:hover td
{
}
.CSSTable tr:nth-child(odd)
{
background-color: #e5e5e5;
}
.CSSTable tr:nth-child(even)
{
background-color: #ffffff;
}
.CSSTable td
{
vertical-align: middle;
border: 1px solid #000000;
border-width: 0px 1px 1px 0px;
text-align: left;
padding: 7px;
font-size: 11px;
font-family: Arial;
font-weight: normal;
color: #000000;
}
.CSSTable tr:last-child td
{
border-width: 0px 1px 0px 0px;
}
.CSSTable tr td:last-child
{
border-width: 0px 0px 1px 0px;
}
.CSSTable tr:last-child td:last-child
{
border-width: 0px 0px 0px 0px;
}
.CSSTable tr:first-child td
{
background: -o-linear-gradient(bottom, #4c4c4c 5%, #000000 100%);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c4c4c), color-stop(1, #000000) );
background: -moz-linear-gradient( center top, #4c4c4c 5%, #000000 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c", endColorstr="#000000");
background: -o-linear-gradient(top,#4c4c4c,000000);
background-color: #4c4c4c;
border: 0px solid #000000;
text-align: center;
border-width: 0px 0px 1px 1px;
font-size: 10px;
font-family: Verdana;
font-weight: bold;
color: #ffffff;
}
.CSSTable tr:first-child:hover td
{
background: -o-linear-gradient(bottom, #4c4c4c 5%, #000000 100%);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c4c4c), color-stop(1, #000000) );
background: -moz-linear-gradient( center top, #4c4c4c 5%, #000000 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c", endColorstr="#000000");
background: -o-linear-gradient(top,#4c4c4c,000000);
background-color: #4c4c4c;
}
.CSSTable tr:first-child td:first-child
{
border-width: 0px 0px 1px 0px;
}
.CSSTable tr:first-child td:last-child
{
border-width: 0px 0px 1px 1px;
}
.CSSTable tr:hover
{
background-color:Gray;
}
</style>
最佳答案
好吧,既然你没有发布与这个问题相关的相关 html 标记,我猜你已经将 CSSTable
类添加到你的包装表中了?例如,如果您有这个 html 层次结构...
<table class="CSSTable">
<tr>
<td><asp:GridView>...</asp:GridView></td>
</tr>
<tr>
<td><asp:GridView>...</asp:GridView></td>
</tr>
<tr>
<td><asp:GridView>...</asp:GridView></td>
</tr>
</table>
你应该把它改成...
<table>
<tr>
<td><asp:GridView CssClass="CSSTable">...</asp:GridView></td>
</tr>
<tr>
<td><asp:GridView CssClass="CSSTable">...</asp:GridView></td>
</tr>
<tr>
<td><asp:GridView CssClass="CSSTable">...</asp:GridView></td>
</tr>
</table>
或者如果您只针对行悬停,只需创建一个 css 类来处理悬停事件,然后设置 RowStyle
元素的 CssClass
属性...
<asp:GridView>
<RowStyle CssClass="" />
</asp:GridView>
关于html - ASP.NET:GridView 在 HTML 表格中的背景也改变颜色(鼠标悬停),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22494644/