colonne tabelle riadattabili

**linux4life** · 03-01-2009, 18:41

esiste uno script in javascript ke ti permetta con il mouse di adattare la larghezza delle colonne?

**br1** · 03-01-2009, 18:59

Originariamente inviato da linux4life
esiste uno script in javascript ke ti permetta con il mouse di adattare la larghezza delle colonne?

Diciamo di si, ma con beneficio d'inventario: non si puo' escludere a priori una qualche soluzione ad un problema posto in modo cosi' generico...

ciao

**Enzo (Strayst.)** · 03-01-2009, 19:28

Con TABLE, prima di dire colonne bisogna dire righe.

La larghezza assunta da una cella viene assunta anche dalle sue corrispondenti delle righe sopra- e sotto-stanti.
Da qui scaturisce l' idea di colonna.

Nell' esempio, la larghezza assegnata alle celle della prima riga <TD WIDTH="16%"> mantiene le larghezze uguali tra loro anche se inseriamo altro contenuto; ma le mantiene SIN CHE PUÒ.
Con TABLE infatti, il contenuto "vince" sempre sulle dimensioni assegnate coi Valori (pixel o percentuale; solo numerii interi).
In mancanza di Valori assegnati, le larghezze delle celle sono basate sul volume dei contenuti dal computer.
In mancanza, e di Valori assegnati, e di contenuto, la TABLE si richiude su se stessa come un elastico.

Vedi se questo SCRIPT ti può essere utile: agendo sulla sola WIDTH di TABLE, si adattano anche tutte le colonne.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>resize table</title>

<script type="text/javascript">
<!--

function sizeWidth(amount) {

	document.getElementById("grid").width = amount;
	}

-->
</script>

</head>
<body bgcolor="#D0D090">


<div align="center">
                    <input value="resize W=0%" type="button" onclick="sizeWidth('0%')">
                    <input value="resize W=25%" type="button" onclick="sizeWidth('25%')">
                    <input value="resize W=50%" type="button" onclick="sizeWidth('50%')">
                    <input value="resize W=75%" type="button" onclick="sizeWidth('75%')">
                    <input value="resize W=100%" type="button" onclick="sizeWidth('100%')">



<table id="grid" border="1" cellpadding="0" cellspacing="0" height="50%" width="50%"><tr>
      <td width="16%">1
 </td><td width="16%">2
 </td><td width="16%">3
 </td><td width="16%">4
 </td><td width="16%">5
 </td><td width="16%">6
 </td>
 </tr><tr>
      <td>1
 </td><td>2
 </td><td>3
 </td><td>4
 </td><td>5
 </td><td>6
 </td>
 </tr><tr>
      <td>1
 </td><td>2
 </td><td>3
 </td><td>4
 </td><td>5
 </td><td>6
 </td>
 </tr><tr>
      <td>1
 </td><td>2
 </td><td>3
 </td><td>4
 </td><td>5
 </td><td>6
 </td>
 </tr>
</table>
</div>


</body>
</html>

**linux4life** · 03-01-2009, 21:49

il tuo script è molto interesante, pernsavo però esistesse qualcosa in modo da aire con il mouse tra le celle, clicchi allarghi, ecc

**br1** · 05-01-2009, 15:33

Un vecchio esperimento non proseguito...

codice:

<HEAD>
<script>
var spFlag = false;
var osx = 0;
var nsx = 0;

function spMove(o) {
	if (spFlag ){
		nsx = event.screenX;
		ll = parseInt(document.getElementById(o).style.width) + nsx - osx;
		if(ll >= 0) {
			document.getElementById(o).style.width = "" + ll + "px"; 
			osx = nsx;
		}
	}
}                                                   
                                                                
function spDown(o) {
	document.body.style.cursor = 'move';
	spFlag = true;
	osx = event.screenX;
}

function spUp(o) {
	document.body.style.cursor = 'auto';
	spFlag = false;
}

document.ondragstart   = new Function("return false;");

</script>
</HEAD>

<BODY>
<table border=1 bordercolor=black cellpadding=0 cellspacing=0 style="border-collapse: collapse;">
	<tr>
		<td nowrap><div id="t1" style="height: 2px;width: 20px;display: inline;"></div>[img]nero.gif[/img]</td>
		<td nowrap><div id="t2" style="height: 2px;width: 20px;display: inline;"></div>[img]nero.gif[/img]</td>
		<td nowrap>fisso</td>
	</tr>
</table>

ciao

Discussione: colonne tabelle riadattabili

Strumenti discussione

Ricerca discussione

Visualizza

colonne tabelle riadattabili

Re: colonne tabelle riadattabili

resize TABLE WIDTH

Permessi di invio