在DNN中常用的布局经常会用到表格布局,虽然table对css的支持不咋地,但是对于传统的asp.net程序员来说这还是绕不开的坎。在时下流行的bootstrap中对table元素也有很好的支持。那DNN7中对Table的支持怎么样呢?
还是先看看我原来后台管理模块中Table悲催的样式--当然也是我偷懒的结果^_*
然后再看看我在应用DNN7中针对table元素的css样式后的界面(还是颇有bootstrap的风范的),
要应用DNN7的表格样式,其实很简单--一以gridivew为例,我们只要将CssClass设置成dnnTableDisplay以及将GridLines设置成None就可以了。
附录(DNN7中相关CSS)
.dnnTableDisplay {
margin-bottom: 18px;
border: 1px solid #d1d1d1;
border-left: 0;
border-bottom: 0;
}
.dnnTableDisplay td, .dnnTableDisplay th {
padding: 5px 9px;
border-bottom: 1px solid #d1d1d1;
}
.dnnTableDisplay th {
padding: 0;
border-left: 1px solid #d1d1d1;
-webkit-box-shadow: 1px 0px 0px 0px rgba(255, 255, 255, 0.9);
box-shadow: 1px 0px 0px 0px rgba(255, 255, 255, 0.9);
}
.dnnTableDisplay th > span,
.dnnTableDisplay th > a {
display: block;
padding: 5px 9px;
}
.dnnTableDisplay td:first-child {
border-left: 1px solid #cfcfcf;
}
.dnnTableDisplay label {
display: inline;
padding-left: 5px;
}
.dnnTableDisplay caption {
display: none;
}
/* thead styles */
.dnnTableDisplay th {
background: -moz-linear-gradient(top, #f5f5f5 0%, #dfdfdf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f5f5f5 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f5f5f5 0%,#dfdfdf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f5f5f5 0%,#dfdfdf 100%); /* IE10+ */
background: linear-gradient(top, #f5f5f5 0%,#dfdfdf 100%); /* W3C */
text-align: left;
text-shadow: 1px 1px 0px rgba(255,255,255,0.8);
color: #333;
}
.dnnTableDisplay th a, .dnnTableDisplay th label {
font-weight: normal;
color: #333;
text-decoration: none;
}
.dnnTableDisplay th a {
padding: 8px 9px;
}
.dnnTableDisplay th a:hover {
background: #fefefe; /* Old browsers */
background: -moz-linear-gradient(top, #fefefe 0%, #e8e8e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#e8e8e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefefe 0%,#e8e8e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefefe 0%,#e8e8e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fefefe 0%,#e8e8e8 100%); /* IE10+ */
background: linear-gradient(top, #fefefe 0%,#e8e8e8 100%); /* W3C */
color: #333;
}
.dnnTableDisplay th a:active {
border-color: #999;
background: #c6c6c6; /* Old browsers */
background: -moz-linear-gradient(top, #c6c6c6 0%, #f3f3f3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c6c6c6), color-stop(100%,#f3f3f3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c6c6c6 0%,#f3f3f3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c6c6c6 0%,#f3f3f3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c6c6c6 0%,#f3f3f3 100%); /* IE10+ */
background: linear-gradient(top, #c6c6c6 0%,#f3f3f3 100%); /* W3C */
-webkit-box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
}
/* tbody styles */
.dnnTableDisplay tr:nth-child(2n) td {
background: rgba(0,0,0,0.04);
}
.dnnTableDisplay tr:hover td {
background: rgba(2,139,255,0.15); /* blue */
}
/* tfooter styles */
.dnnTableDisplay tfoot tr:hover td {
background: none;
}