如何將Devexpress主題應用於基本的html表格？

Question

我在我的MVC3 w/razor項目中使用Devexpress的MVC exctensions。我有使用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************************************/