SummArg | Cursos y recursos para webmasters

28/04/2012

Alternar colores por fila y resaltar al pasar el puntero del mouse en una tabla, con CSS3 y jQuery!

Hace ya dos años compartimos con ustedes un tutorial sobre este tema: Alternar colores por fila en una tabla y resaltar fila al pasar el mouse pensado en navegadores que hoy ya soportan CSS3 sin problemas. Sin embargo siempre quedan usuarios cuyos browsers quedaron algo antiguos, por lo que además de aplicar los efectos vía CSS3 es conveniente escribir un fallback (en caso de que no soporte la primer tecnología, aplicamos otra de reserva) en jQuery.

Este tutorial de red-team-design resulta muy práctico para dar estilo a nuestras tablas, añadiendo el plus de colocar esquinas redondeadas. El primer ejemplo que nos brinda nos ayuda a generar una tabla con un encabezado y pié con bordes redondeados y con un efecto highlight al pasar el puntero del mouse por sus filas.

La estructura HTML es la siguiente:

<table class="bordered">
 <thead>
 <tr>
 <th>#</th>
 <th>IMDB Top 10 Movies</th>
 <th>Year</th>
 </tr>
 </thead>
 <tr>
 <td>1</td>
 <td>The Shawshank Redemption</td>
 <td>1994</td>
 </tr>
 <tr>
 <td>2</td>
 <td>The Godfather</td>
 <td>1972</td>
 </tr>
 <tr>
 <td>3</td>
 <td>The Godfather: Part II</td>
 <td>1974</td>
 </tr>
 <tr>
 <td>4</td>
 <td>The Good, the Bad and the Ugly</td>
 <td>1966</td>
 </tr>
 </table>

Añadimos el estilo para que la tabla se vea con los bordes redondeados.

table {
 *border-collapse: collapse; /* IE7 and lower */
 border-spacing: 0;
 width: 100%;
 }
 .bordered {
 border: solid #ccc 1px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
 -webkit-box-shadow: 0 1px 1px #ccc;
 -moz-box-shadow: 0 1px 1px #ccc;
 box-shadow: 0 1px 1px #ccc;
 }

Colocamos un degradado al encabezado de la tabla y luego colocaremos bordes redondeados al primer y último elemento th (utilizado para el encabezado) y td (celdas comunes).

.bordered th {
 background-color: #dce9f9;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
 background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
 background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
 background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
 background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
 background-image: linear-gradient(top, #ebf3fc, #dce9f9);
 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
 -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
 box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
 border-top: none;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 }
 .bordered td:first-child, .bordered th:first-child {
 border-left: none;
 }
 .bordered th:first-child {
 -moz-border-radius: 6px 0 0 0;
 -webkit-border-radius: 6px 0 0 0;
 border-radius: 6px 0 0 0;
 }
 .bordered th:last-child {
 -moz-border-radius: 0 6px 0 0;
 -webkit-border-radius: 0 6px 0 0;
 border-radius: 0 6px 0 0;
 }
 .bordered th:only-child{
 -moz-border-radius: 6px 6px 0 0;
 -webkit-border-radius: 6px 6px 0 0;
 border-radius: 6px 6px 0 0;
 }
 .bordered tr:last-child td:first-child {
 -moz-border-radius: 0 0 0 6px;
 -webkit-border-radius: 0 0 0 6px;
 border-radius: 0 0 0 6px;
 }
 .bordered tr:last-child td:last-child {
 -moz-border-radius: 0 0 6px 0;
 -webkit-border-radius: 0 0 6px 0;
 border-radius: 0 0 6px 0;
 }

Y finalmente el efecto hover.

.bordered tr:hover {
 background: #fbf8e9;
 -o-transition: all 0.1s ease-in-out;
 -webkit-transition: all 0.1s ease-in-out;
 -moz-transition: all 0.1s ease-in-out;
 -ms-transition: all 0.1s ease-in-out;
 transition: all 0.1s ease-in-out;
 }

Si quisieramos añadir el efecto vía jQuery, bastaría con colocar al final de documento:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $('.bordered tr').mouseover(function(){
 $(this).addClass('highlight');
 }).mouseout(function(){
 $(this).removeClass('highlight');
 });
 });

Y debemos añadir al CSS la clase highlight.

.highlight
 {
 background: #fbf8e9;
 -o-transition: all 0.1s ease-in-out;
 -webkit-transition: all 0.1s ease-in-out;
 -moz-transition: all 0.1s ease-in-out;
 -ms-transition: all 0.1s ease-in-out;
 transition: all 0.1s ease-in-out;
 }

Si a la misma tabla queremos agregarle un fondo diferente fila por medio, entonces podemos añadir el siguiente CSS:

.bordered tbody tr:nth-child(even) {
 background: #f5f5f5;
 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
 -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
 box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
 }

Y el fallback con jQuery sería el siguiente:

$(".bordered tbody tr:even").addClass('alternate');

El cual necesita de la siguiente clase en nuestro CSS.

.alternate {
 background: #f5f5f5;
 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
 -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
 box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
 }

Pueden comprobar observando el demo desde alguna PC con Internet Explorer 8 e inferiores (que no soportan CSS3) como las tablas siguen viendose bien y conservando las funciones que desarrollamos.

Si quieren ir mas lejos con las compatibilidades pueden utilizar Selectivizr para que los usuarios con IE6 a IE8 reconozcan los nuevos selectores y PIE, para que rendericen las nuevas propiedades CSS3.

Tutorial original | Demo

 

 

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Hace ya dos años compartimos con ustedes un tutorial sobre este tema: Alternar colores por fila en una tabla y resaltar fila al pasar el mouse pensado en navegadores que hoy ya soportan CSS3 sin problemas. Sin embargo siempre…..

  2. muy buen tutorial me funciono bien gracias por compartirlo

Dejar un comentario