GridView ASP.Net & CSS

Que tal amig@s después de unos días de no publicar, hoy me he dado un tiempo para escribir a cerca del control GridView del ASP.Net,  un control que tal vez es el de los más utilizados cuando se trabaja con la manipulación de datos en los sistemas informáticos, en el entorno de desarrollo de Visual Studio es muy fácil agregar un GridView obteniendo la funcionalidad en cuestión de segundos, podemos elegir diseños de colores predeterminados para que luzcan una mejor apariencia, pero para mi gusto son muy estáticos y no son tan llamativos para el usuario llegando a tal punto que podrían resultar aburridos.

Para darle dinamismo y que el usuario tenga una mejor experiencia cuando trabaja con un sistema es posible implementar código CSS para lograr nuestro objetivo.

¿Como lo haremos? 
Bueno, si miramos el código que HTML que se genera de un GridView nos daremos cuenta que en realidad se transforma en una tabla HTML estándar.

<tableborder="1" cellspacing="0" id="GridView1" rules="all" style="border-collapse: collapse;">
<tbody>
<tr><th scope="col">ID</th><th scope="col">Nombre</th><th scope="col">ApellidoPaterno</th><th scope="col">ApellidoMaterno</th><th scope="col">FechaNacimiento</th><th scope="col">Sexo</th><th scope="col">Seleccionar</th></tr>
<tr class="GridRowOdd"><td>000001</td><td>Nomnbre 1</td><td>Apellido Paterno 1</td><td>Apellido Materno 1</td><td>Fecha 1</td><td>S1</td><td align="center"><a href="javascript:__doPostBack('GridView1','Select$0')">Seleccionar</a></td></tr>
<tr class="GridRowEven"><td>000002</td><td>Nomnbre 2</td><td>Apellido Paterno 2</td><td>Apellido Materno 2</td><td>Fecha 2</td><td>S2</td><td align="center"><a href="javascript:__doPostBack('GridView1','Select$1')">Seleccionar</a></td></tr>
<tr class="GridRowOdd"><td>000003</td><td>Nomnbre 3</td><td>Apellido Paterno 3</td><td>Apellido Materno 3</td><td>Fecha 3</td><td>S3</td><td align="center"><a href="javascript:__doPostBack('GridView1','Select$2')">Seleccionar</a></td></tr>
<tr class="GridRowEven"><td>000004</td><td>Nomnbre 4</td><td>Apellido Paterno 4</td><td>Apellido Materno 4</td><td>Fecha 4</td><td>S4</td><td align="center"><a href="javascript:__doPostBack('GridView1','Select$3')">Seleccionar</a></td></tr>
<tr class="GridRowOdd"><td>000005</td><td>Nomnbre 5</td><td>Apellido Paterno 5</td><td>Apellido Materno 5</td><td>Fecha 5</td><td>S5</td><td align="center"><a href="javascript:__doPostBack('GridView1','Select$4')">Seleccionar</a></td></tr>
</tbody>
</table>

GridView antes de implementar CSS.

Por lo tanto observando la estructura de la tabla podemos crear el CSS personalizado por nosotros mismo, con el cual podemos incluir dinamismo e interacción a los eventos del usuario.

/*Definimos el CSS para todas las GridView con la Clase GridView*/
 table.GridView{
    font-family:Verdana; 
    font-size:12px;
    color:#444;
    border:2px solid #000;
  } 
  
 /*Cabecera de la GridView*/
 table.GridView tr th 
 {
    border:0px solid #C3D1DF;
    vertical-align:middle;
    line-height:30px;
    height:30px;
    padding:4px;
    background-color:#000;
    font-weight:bold; 
    font-size:14px;
    color:white; 
    text-align:center;
 }
 
 /*Aplicamos CSS para cada celda del GridView*/    
 table.GridView tr td{ 
    height:24px;
    vertical-align:middle;
    line-height:24px;
    padding-left:6px;
    padding-right:6px;
  }
  
 /*Clases para obtener el efecto Zebra en la GridView*/
/*Es Necesario agregar la propiedad "RowStyle" y "AlternatingRowStyle" a la GridView despues de Columns */
/*RowStyle CssClass="GridRowOdd" */
/*AlternatingRowStyle CssClass="GridRowEven" */
           
.GridRowOdd{background-color:#DEE9F5;} 
.GridRowEven{background-color:#F7F7F7;}

 /*Aplicamos este CSS para cada fila cuando el mouse esta encima de la fila*/
 table.GridView tr:hover{
    background:#fac754;
    color:#FF1717;
 } 

/*Este CSS se aplica cuando se ha selccionado un fila del GridView*/
/*Es Necesario agregar la propiedad "SelectedRowStyle" despues de Columns*/
/*SelectedRowStyle CssClass="GridRowSelected"*/

.GridRowSelected{
    background-color:#E0F191;
    color:Red;
}

GridView con la implementacion de CSS.

Bueno esto es todo por hoy amig@s, nos vemos en la próxima publicación.