How to make the style in Gridview

Hi selastin,
Actually grid view gets render as an HTML table. I am using this

table a:link {

color: #666;

font-weight: bold;

}

table a:visited {

color: #999999;

font-weight:bold;

}

table a:active,

table a:hover {

color: #bd5a35;

text-decoration:underline;

}

table {

font-family:Arial, Helvetica, sans-serif;

color:#666;

font-size:12px;

text-shadow: 1px 1px 0px #fff;

background:#eaebec;

margin:5px;

border:#ccc 1px solid;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

-moz-box-shadow: 0 1px 2px #d1d1d1;

-webkit-box-shadow: 0 1px 2px #d1d1d1;

box-shadow: 0 1px 2px #d1d1d1;

}

table th {

padding:20px 25px 22px 25px;

border-top:1px solid #fafafa;

border-bottom:1px solid #e0e0e0;

background: #ededed;

background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));

background: -moz-linear-gradient(top, #ededed, #ebebeb);

}

table th:first-child{

text-align: left;

padding-left:10px;

}

table tr:first-child th:first-child{

-moz-border-radius-topleft:3px;

-webkit-border-top-left-radius:3px;

border-top-left-radius:3px;

}

table tr:first-child th:last-child{

-moz-border-radius-topright:3px;

-webkit-border-top-right-radius:3px;

border-top-right-radius:3px;

}

table tr{

text-align: center;

padding-left:10px;

}

table tr td:first-child{

text-align: left;

padding-left:10px;

border-left: 0;

}

table tr td {

padding:10px;

border-top: 1px solid #ffffff;

border-bottom:1px solid #e0e0e0;

border-left: 1px solid #e0e0e0;

background: #fafafa;

background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));

background: -moz-linear-gradient(top, #fbfbfb, #fafafa);

}

table tr.even td{

background: #f6f6f6;

background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));

background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);

}

table tr:last-child td{

border-bottom:0;

}

table tr:last-child td:first-child{

-moz-border-radius-bottomleft:3px;

-webkit-border-bottom-left-radius:3px;

border-bottom-left-radius:3px;

}

table tr:last-child td:last-child{

-moz-border-radius-bottomright:3px;

-webkit-border-bottom-right-radius:3px;

border-bottom-right-radius:3px;

}

table tr:hover td{

background: #f2f2f2;

background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));

background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);

}

Hope it will help.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Lakshmanan Sethu Sankaranarayan12y ago
Hello Check this http://msdn.microsoft.com/en-us/library/ms743659(v=vs.110).aspx
0
Anupam Singh12y ago
Hi selastin,
Actually grid view gets render as an HTML table. I am using this

table a:link {
color: #666;
font-weight: bold;
}
table a:visited {
color: #999999;
font-weight:bold;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
text-shadow: 1px 1px 0px #fff;
background:#eaebec;
margin:5px;
border:#ccc 1px solid;

-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;

-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
}
table th {
padding:20px 25px 22px 25px;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;

background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
background: -moz-linear-gradient(top, #ededed, #ebebeb);
}

table th:first-child{
text-align: left;
padding-left:10px;
}
table tr:first-child th:first-child{
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
}
table tr:first-child th:last-child{
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
}
table tr{
text-align: center;
padding-left:10px;
}
table tr td:first-child{
text-align: left;
padding-left:10px;
border-left: 0;
}
table tr td {
padding:10px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
table tr.even td{
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
table tr:last-child td{
border-bottom:0;
}
table tr:last-child td:first-child{
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child{
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
}
table tr:hover td{
background: #f2f2f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
}

Hope it will help.
0