Chuty:
Este código es un pequeño experimento que hice.
La imagen es un gif transparente de 1x1px. Sólo puedes redimensionar las columnas arrastrando las divisiones en los encabezados de la tabla.
Código:
<html>
<head>
<title></title>
<style>
.tirador {
width: 2px;
height: 20px;
background-color: #1c3a80;
cursor: e-resize;
}
#dimen {
border-top: 1px solid #1c3a80;
border-left: 1px solid #1c3a80;
border-bottom: 1px solid #1c3a80;
font-family: Tahoma, Arial;
font-size: 10pt;
}
#dimen th {
border-top: 1px solid #1c3a80;
border-bottom: 1px solid #1c3a80;
}
#dimen td {
border-right: 2px solid #1c3a80;
border-bottom: 1px solid #1c3a80;
border-top: 1px solid #1c3a80;
}
</style>
<script>
tirador = null;
function asignar(){
tirador = event.srcElement;
if (tirador == null) { return };
if(tirador.id.indexOf("tira") != -1) {
actX = event.clientX;
}
}
function dimen() {
if (tirador == null) { return };
nuevoX = event.clientX;
distancia = (nuevoX - actX);
actX = nuevoX;
columna = eval("columna" + tirador.id.substr(4));
ancho = parseInt(columna.style.width) + distancia;
if(ancho < columna.anchoMin){
tirador = null
ancho = columna.anchoMin;
};
columna.style.width = ancho;
event.returnValue = false;
}
function soltar(){
tirador = null;
}
function iniciar(){
for(i=0; i<6; i++){ //número de columnas
obj = eval("columna" + i);
obj.anchoMin = parseInt(obj.style.width);
}
}
document.onmousedown = asignar;
document.onmousemove = dimen;
document.onmouseup = soltar;
window.onload = iniciar;
</script>
</head>
<body>
<table id="dimen" border=0 cellspacing=0 cellpadding=0>
<tr>
<th style="border-left: 1px solid #1c3a80; width:50" id="columna0">Celda 1</th>
<th><img src="space.gif" class="tirador" id="tira0"></th>
<th id="columna1" style="width:55">Celda 2</th>
<th><img src="space.gif" class="tirador" id="tira1"></th>
<th id="columna2" style="width:60">Celda 3</th>
<th><img src="space.gif" class="tirador" id="tira2"></th>
<th id="columna3" style="width:65">Celda 4</th>
<th><img src="space.gif" class="tirador" id="tira3"></th>
<th id="columna4" style="width:70">Celda 5</th>
<th><img src="space.gif" class="tirador" id="tira4"></th>
<th id="columna5" style="width:75">Celda 6</th>
<th><img src="space.gif" class="tirador" id="tira5"></th>
</tr>
<tr>
<td style="border-left: 1px solid #1c3a80" colspan="2">a</td>
<td colspan="2">b</td>
<td colspan="2">c</td>
<td colspan="2">d</td>
<td colspan="2">e</td>
<td colspan="2">f</td>
</tr>
<tr>
<td style="border-left: 1px solid #1c3a80" colspan="2">A</td>
<td colspan="2">B</td>
<td colspan="2">C</td>
<td colspan="2">D</td>
<td colspan="2">E</td>
<td colspan="2">F</td>
</tr>
</table>
</body>
</html>
El ancho que defines en el estilo de cada celda del encabezado, es el mínimo al que la celda podrá ser reducida.
Espero que te sea útil.
Saludos.