jQuery Resizable Columns es un simple, pero no por eso menos útil, plugin jQuery para ajustar automáticamente el tamaño de las columnas al ancho del navegador de nuestro visitante.
Este plugin, y a diferencia a de otras alternativas similares, utiliza local storage para guardar el tamaño de las columnas para luego, y en caso de actualizar el navegador o cambiar el tamaño de la ventana, no se tenga que volver a calcular el ancho de las distintas columnas de la tabla.
Un punto muy favorable de este proyecto es su peso, apenas 3kb para su versión simplificada.
Sus únicas dependencias son jQuery y Store.js, esta ultima biblioteca se emplea para gestionar la información almacenada en local storage.
Tablas con columnas que se ajustan automáticamente
<script src="libs/jquery.js"></script>
<script src="libs/store.js"></script>
<script src="jquery.resizableColumns.js"></script>
<table data-resizable-columns-id="demo-table">
<thead>
<tr>
<th data-resizable-column-id="#">#</th>
<th data-resizable-column-id="first_name">First Name</th>
<th data-resizable-column-id="last_name">Last Name</th>
<th data-resizable-column-id="username" data-noresize>Username</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
<script>
$(function(){
$("table").resizableColumns({
store: store
});
});
</script>
Este plugin es un proyecto con licencia MIT. Su compatibilidad con los distintos navegadores es excelente, funciona en Chrome y Firefox (tanto para Windows como para Mac) y en IE en su versión 9 o superior.