Ando buscando la forma de hacer una tabla ajustable, o sea que el usuario pueda ajustar el anco de las columnas, a su comodidad, la cual si el ancho de la columna es menor al dato de la celda, la informacion de la misma, tendria que cortarce tal como por ejemplo con el windows Explorer.
Por ejemplo yo tengo el siguiente codigo que ajusto el ancho de la columna pero al llegar a la informacion de la celda no puedo continuar reduciendo el anho.
Código PHP:
<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 5555</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>
