FooTable es un plugin para jQuery que nos permite visualizar las tablas HTML adaptándolas a cualquier resolución (Responsive Design), y sin romper la funcionalidad del diseño.

Lo que hace este plugin es auto-ocultar las columnas seleccionadas en cada punto de interrupción definido (breakpoint) en una tabla, de modo que los usuarios no tendrán que desplazarse horizontalmente para ver el resto de su contenido.

Para ver el contenido de las columnas ocultas, bastará con hacer clic en cada fila y debajo de esta aparecerá el contenido restante.

Ejemplo de uso:

Primero se incluyen los archivos JS y CSS:

<link href="css/footable-0.1.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/footable-0.1.js" type="text/javascript"></script>

Luego llamamos al script:

<script type="text/javascript">
    $(function () {
        $('.footable').footable();
    });
</script>

Luego creamos una tabla simple, estableciendo los atributos para cada columna, en este caso: Teléfono e Email:

<table class="footable">
    <thead>
        <tr>
            <th>Nombre</th>
            <th data-hide="phone,tablet">Teléfono</th>
            <th data-hide="phone,tablet">Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Juan Pérez</td>
            <td>555-12345</td>
            <td>jperez@dominio.com</td>
        </tr>
        <tr>
            <td>Perico de los Palotes</td>
            <td>544-776655</td>
            <td>perico@pagina.com</td>
        </tr>
        <tr>
            <td>John Smith</td>
            <td>555-99911</td>
            <td>jsmith@email.com</td>
        </tr>
    </tbody>
</table>

Web: http://themergency.com/footable/
Demo: http://themergency.com/footable-demo/demo.htm
Descarga: https://github.com/bradvin/FooTable