如何将 Devexpress 主题应用到基本 html 表格？

Question

我在我的 MVC3 w/razor 项目中使用 Devexpress 的 MVC 扩展。我有使用 Devexpress 的 MVC 扩展的数据网格以及没有任何样式的基本 html 表。

有没有办法将 devexpress 样式应用到我的 html 表格以获得一致的外观？

Answer 1

您可以使用 css 来设置网格样式，然后对表格遵循相同的原则。这是我创建的网格样式，然后是类似外观的表格的样式

/************************GRID STYLE************************************/
.mGrid
{
width: 100%;
background-color: #fff;
margin: 5px 0 5px 0;
border: solid 1px #525252;
border-collapse: collapse;
font-size: 13px; /*width: 820px;*/
text-align: center;
}
.mGrid td
{
padding: 2px;
border: solid 1px #c1c1c1; 
color: #717171;
height: 20px;
}
.mGrid th
{
padding: 4px 2px;
color: #fff;
background: #424242 url(images/grd_head.png) repeat-x top;
border-left: solid 1px #525252;
height: 20px; /*font-size: 15px; */
}
.mGrid .alt
{
background: #fcfcfc url(images/grd_alt.png) repeat-x top;
}
.mGrid .pgr
{
background: #424242 url(images/grd_pgr.png) repeat-x top;
text-align: left;
}
.mGrid .pgr table
{
margin: 5px 0;
}
.mGrid .pgr td
{
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.mGrid .pgr a
{
color: #666;
text-decoration: none;
font-size: 13px;
}
.mGrid .pgr a:hover
{
color: #AED434;
text-decoration: none;
font-size: 13px;
}

/************************END GRID STYLE************************************/

/************************mGrid Table Look alike STYLE************************************/
 .mGridLookAlikeTable
{
width: 100%;
background-color: #fff;
margin: 5px 0 5px 0;
border: solid 1px #525252;
border-collapse: collapse;
font-size: 13px;
/*width: 820px;*/
text-align: center;
 }

 .mGridLookAlikeTable td
 {
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
height: 20px;
 }
 .mGridLookAlikeTable th
 {
padding: 4px 2px;
color: #fff;
background: #424242 url(images/grd_head.png) repeat-x top;
border-left: solid 1px #525252;
height: 20px; /*font-size: 15px; */
 }

 /************************END mGrid Table Look alike STYLE************************************/