Ciao a tutti!
Questo e' il mio primo messaggio, nonostante segua spesso questo forum.
Mi sono imbattutto in un problema che mi ha lasciato un po' perplesso: settare la larghezza dei th/td di una tabella da js, senza settare la larghezza della tabella che li contiene (di solito, da quanto ho visto, la larghezza totale delle colonne di una tabella diventa la width della tabella stessa, e l'altezza totale delle righe ne diventa la height).
Mi spiego meglio: la tabella e' contenuta in un div, che e' scrollabile, quindi ha width e height settate. Se setto le dimensioni della tabella, problemi non ce ne sono. Se non lo faccio, e setto una width per i th/td, questi si "ristringono" per non superare la larghezza del div (possibile?? Preciso che ho settato, alla tabella, la proprieta' display come "block"...).
Se invece agli stessi th/td setto la height, la mantengono e il div scrolla in verticale senza nessun problema (come da codice sotto).
Ho settato, quasi per caso, noWrap=true per ogni th/td della tabella (l'attributo html obj.noWrap): tutto funziona alla perferzione con Chrome, l'ultimo Opera, l'ultimo IE e l'ultimo FF (con le versioni precedenti non ho provato).
Da inesperto mi chiedo: possibile che sia cosi' difficile impostare una larghezza ai th/td di una tabella, contenuta in un div, senza settare la larghezza della tabella? Possibile che la soluzione sia l'attributo noWrap che dovrebbe servire solo per il testo?! Girando per la rete non ho trovato niente a riguardo: non c'e' un approccio "standard" al problema?
Posto il codice che ho usato per le prove, per dare un'idea piu' precisa del problema; commentanto i tre noWrap che ci sono, si presenta il problema...
(prova.js)
document.write('<link rel="stylesheet" type="text/css" href="prova.css">');
//set css of obj
var _addClassName=function(obj,className){
//if(!EmptyString(className))
obj.setAttribute("className", className);
}
//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('thead'));
ColsTitles=tHead.appendChild(document.createElement('tr'));
emptyCross=ColsTitles.appendChild(document.createElement('th'));//empty th for row-titles column
var tBody=table.appendChild(document.createElement('tbody'));
//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();
_addClassName(hTit,'columnTitle');
}
// making rows
var tr, td;
for(var i=0; i<TOT_ROWS; i++){
// rows titles
tr=tBody.appendChild(document.createElement('tr'));
hTit=tr.appendChild(document.createElement('th'));
hTit.id="thRow_"+i.toString();
hTit.innerHTML=i.toString();
_addClassName(hTit,'rowTitle');
// making empty tds
for(var j=0; j<TOT_COLS; j++){
td=tr.appendChild(document.createElement('td'));
td.id="td_"+j.toString();
td.innerHTML=' ';
_addClassName(td,'allCell');
}
}
//show table
table.style.display='block';
}
}
var table0=new table();//create table istance
table0.draw();
(prova.css)
th{
background-color: green;
}
td{
background-color: red;
width: 100px;
}
(index.html)
<html>
<body>
<SCRIPT type="text/javascript" src="prova.js">
</script>
</body>
</html>
Questo e' il mio primo messaggio, nonostante segua spesso questo forum.
Mi sono imbattutto in un problema che mi ha lasciato un po' perplesso: settare la larghezza dei th/td di una tabella da js, senza settare la larghezza della tabella che li contiene (di solito, da quanto ho visto, la larghezza totale delle colonne di una tabella diventa la width della tabella stessa, e l'altezza totale delle righe ne diventa la height).
Mi spiego meglio: la tabella e' contenuta in un div, che e' scrollabile, quindi ha width e height settate. Se setto le dimensioni della tabella, problemi non ce ne sono. Se non lo faccio, e setto una width per i th/td, questi si "ristringono" per non superare la larghezza del div (possibile?? Preciso che ho settato, alla tabella, la proprieta' display come "block"...).
Se invece agli stessi th/td setto la height, la mantengono e il div scrolla in verticale senza nessun problema (come da codice sotto).
Ho settato, quasi per caso, noWrap=true per ogni th/td della tabella (l'attributo html obj.noWrap): tutto funziona alla perferzione con Chrome, l'ultimo Opera, l'ultimo IE e l'ultimo FF (con le versioni precedenti non ho provato).
Da inesperto mi chiedo: possibile che sia cosi' difficile impostare una larghezza ai th/td di una tabella, contenuta in un div, senza settare la larghezza della tabella? Possibile che la soluzione sia l'attributo noWrap che dovrebbe servire solo per il testo?! Girando per la rete non ho trovato niente a riguardo: non c'e' un approccio "standard" al problema?
Posto il codice che ho usato per le prove, per dare un'idea piu' precisa del problema; commentanto i tre noWrap che ci sono, si presenta il problema...
(prova.js)
document.write('<link rel="stylesheet" type="text/css" href="prova.css">');
//set css of obj
var _addClassName=function(obj,className){
//if(!EmptyString(className))
obj.setAttribute("className", className);
}
//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('thead'));
ColsTitles=tHead.appendChild(document.createElement('tr'));
emptyCross=ColsTitles.appendChild(document.createElement('th'));//empty th for row-titles column
var tBody=table.appendChild(document.createElement('tbody'));
//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();
_addClassName(hTit,'columnTitle');
}
// making rows
var tr, td;
for(var i=0; i<TOT_ROWS; i++){
// rows titles
tr=tBody.appendChild(document.createElement('tr'));
hTit=tr.appendChild(document.createElement('th'));
hTit.id="thRow_"+i.toString();
hTit.innerHTML=i.toString();
_addClassName(hTit,'rowTitle');
// making empty tds
for(var j=0; j<TOT_COLS; j++){
td=tr.appendChild(document.createElement('td'));
td.id="td_"+j.toString();
td.innerHTML=' ';
_addClassName(td,'allCell');
}
}
//show table
table.style.display='block';
}
}
var table0=new table();//create table istance
table0.draw();
(prova.css)
th{
background-color: green;
}
td{
background-color: red;
width: 100px;
}
(index.html)
<html>
<body>
<SCRIPT type="text/javascript" src="prova.js">
</script>
</body>
</html>
