DNN7中的CSS布局（二）/Table布局CSS

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