GridView al estilo jQuery UI

Uno de las mejores cosas que surgieron a partir del jQuery fue la mismísima jQuery UI, si bien hay varios controles que no encontramos (pero que seguramente no son difíciles de hacer) es bastante completo para el día a día del desarrollo de aplicaciones.
Una de las cosas que más trabajamos en las aplicaciones .Net son las tablas para mostrar miles de registros que el cliente necesita ver, analizar, procesar, etc. y es común que a estas no se les aplique ningún estilo en especial, así que este tip es para convertir una tabla como esta:

En esta:

Para lograr esto solo se requiere del siguiente código de CSS3:

.ui-table { border-collapse: inherit !important; border: none; margin-bottom: 8px; }
.ui-table tr td { border: 1px solid #cccccc; border-right: none; border-bottom: none; padding: 3px 1px; }
.ui-table tr th { border: 1px solid #92D400; border-right: none; border-bottom: none; padding: 3px 1px; }
.ui-table tr th { background: #92D400 url(../image/ui/ui-bg_gloss-wave_30_92D400_500x100.png) 50% 50% repeat-x; font-size: 12px; font-weight: normal; color: #ffffff; }
.ui-table tr:last-child td:first-child { border-radius: 0px 0px 0px 4px; }
.ui-table tr:last-child td:last-child { border-radius: 0px 0px 4px 0px; }
.ui-table tr:first-child th:first-child { border-radius: 4px 0px 0px 0px; }
.ui-table tr:first-child th:last-child { border-radius: 0px 4px 0px 0px; border-right: 1px solid #92D400; }
.ui-table tr td:last-child { border-right: 1px solid #cccccc; }
.ui-table tr:last-child td { border-bottom: 1px solid #cccccc; }
.ui-table tr:hover { background-color: #D9F0A4; }

En nuestra vista tendríamos algo como:

<asp:GridView ID="gvwHistory" runat="server" AutoGenerateColumns="false" CssClass="ui-table">
    <Columns>
        <asp:BoundField DataField="StatusConfigurationName" HeaderText="Estatus"/>
        <asp:BoundField DataField="Scheduled" HeaderText="Fecha y hora de cita"/>
        <asp:BoundField DataField="Updated" HeaderText="Actualizado el"/>
    </Columns>
</asp:GridView>

Claro está hay que personalizar la clase ui-table a tus necesidades de imagen y estilo; como se puede observar toda la magia está en los atributos: first-child y last-child y en ocultar los bordes que no ocupamos pues como sabemos un GridView coloca algunos atributos por default que hay que manejar con CSS para lograr una tabla con una vista agradable 😀

Puedes dejar un link con tus diseños para ayudar a otros con tus ideas.