Ciao a tutti!
Chiedo un parere su come ho risolto un problema che mi affliggeva da un po': impostare la dimensione dei th/td di una tabella, senza impostare una dimensione fissa per la tabella (alla quale aggiungo/rimuovo righe e colonne a run-time).
Sono un po' confuso, mi spiego meglio: la tabella e' contenuta in un div, che e' scrollabile, e quindi ha width e height fisse.
Se setto una width fissa per i th/td, questi si "ristringono" per non uscire dalle dimensioni del div (com'e' possibile?). Se invece agli stessi th/td imposto un'altezza fissa, la mantengono e il div scrolla senza nessun problema.
Ho provato anche la soluzione float: impostare il display dei th/td a block, e dargli un "float: left". Quando lo spazio orizzontale del div finisce, le celle non si ristringono ma vanno a capo (tra l'altro non mi piacerebbe come soluzione, perche' che i bordi e il cellspacing della tabella sono annullati).
Quindi ho pensato: quale' quella proprieta' che obbliga gli oggetti ad occupare tutto lo spazio orizzontale a loro dispozione? E mi sono risposto: noWrap. Settando noWrap=true per ogni th/td, tutto funziona alla perferzione con Chrome, l'ultimo Opera, l'ultimo IE e l'ultimo FF.
Da inesperto vi chiedo: sapete spiegarmi il perche' di un comportamento che a me sembra davvero anomalo? La soluzione che ho trovato vi sembra corretta?
Posto il codice che ho usato per le prove, e' una tabella dinamica: commentando le tre righe in cui setto il noWrap, si vede il malfunzionamento di cui parlo sopra.
(index.html)
<html>
<head>
</head>
<body>
<script type="text/javascript" src="prova.js"></script>
</body>
</html>
(prova.js)
//obj table definition
var table=function(e){
this.draw=function(){
var _this=this;//pointer to table
var TOT_ROWS=20;
var TOT_COLS=30;
//div container
divTable=document.firstChild.childNodes[1].appendChild(document.createElement('div'));
divTable.style.width='700px';
divTable.style.height='400px';
divTable.style.overflow='auto';
divTable.style.position='relative';
//end div container
//table width head,tr cols titles, first col th and body
var table=divTable.appendChild(document.createElement( 'table'));
var tHead=table.appendChild(document.createElement('th ead'));
ColsTitles=tHead.appendChild(document.createElemen t('tr'));
emptyCross=ColsTitles.appendChild(document.createE lement('th'));//empty th for row-titles column
emptyCross.style.width='100px';
emptyCross.style.background='pink';
var tBody=table.appendChild(document.createElement('tb ody'));
//end table
// making cols titles
var hTit;
for(var i=0; i<TOT_COLS; i++){
hTit=ColsTitles.appendChild(document.createElement ('th'));
hTit.id='thCol_'+i.toString();
hTit.innerHTML=i.toString();
hTit.style.width='100px';
hTit.noWrap=true;
hTit.style.background='pink';
}
// making rows
var tr, td;
for(var i=0; i<TOT_ROWS; i++){
tr=tBody.appendChild(document.createElement('tr')) ;
hTit=tr.appendChild(document.createElement('th'));
// rows titles
hTit.id="thRow_"+i.toString();
hTit.innerHTML=i.toString();
hTit.style.display='block'
hTit.style.width='100px';
hTit.noWrap=true;
hTit.style.background='green';
// making empty tds
for(var j=0; j<TOT_COLS; j++){
td=document.createElement('td');
td.id="td_"+j.toString();
td.innerHTML='';
td.style.width='100px';
td.noWrap=true;
td.style.background='red';
tr.appendChild(td);
}
}
//show table
table.style.display='block';
}
}
var table0=new table();//create table istance
table0.draw();
Rispondi quotando