Cómo hacer una Tabla Responsive - ACTUALIZADO

Uno de los mayores problemas que nos encontramos al hacer diseño web adaptable es ajustar una tabla en un espacio reducido como el que nos encontramos en los dispositivos móviles (normalmente 320px de ancho).

Hoy traemos una solución bastante simple y muy efectiva que en caso de tener que implementarla en un proyecto apenas va interferir en la maquetación. Se trata solamente de añadir un scroll horizontal a la tabla.

Para ello, primero hay que añadir una capa contenedora a la tabla.

<div class="table-container">
    <table>
        ...
    <table>
</div>

Luego aplicar el siguiente código CSS

.table-container
{
    width: 100%;
    overflow-y: auto;
    _overflow: auto;
    margin: 0 0 1em;
}

NOTA: en dispositivos IOS se puede hacer scroll horizontal, pero por defecto no se muestra la barra de desplazamiento. Para que se vea, añadimos el siguiente código CSS:

.table-container::-webkit-scrollbar
{
-webkit-appearance: none;
width: 14px;
height: 14px;
}

.table-container::-webkit-scrollbar-thumb
{
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}

See the Pen qEMydL by Pedro Marín (@pedromarin) on CodePen.

Decir que esta es una solución de las que propone la web maxdesign. ¡No dudéis en consultar otros métodos!

Otras soluciones

http://zurb.com/playground/responsive-tables

http://elvery.net/demo/responsive-tables/

http://themergency.com/footable/