Tablas ajustables

Chuty · #1 (**permalink**) 14/05/2003, 09:48

Hay forma de hacer una tabla o una grilla en la que los usuarios puedan modificar el ancho de las columnas...
Donde puedo ver un ejemplo o leer sobre el tema si es posible hacerlo.
Gracias y Saludos

Beakdan · #2 (**permalink**) 14/05/2003, 18:58

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.