Newsgroup: it.comp.www.html
Titolo: Ancora riguardo la larghezza delle TD

Ciao a tutti.
Dopo il post "larghezza delle TD" credevo di aver risolto i miei problemi ed
invece ... !
Basta fare copia incolla dell'esempio che ho riportato: mostra due griglie
completamente identiche con l'unica differenza che nella seconda le prime
due righe sono state invertite (la prima al posto della seconda e la seconda
al posto della prima); mi aspetterei che nel browser (Mozilla 1.4) l'unica
differenza sia appunto che le due righe sono invertite ed invece questo
causa anche delle dimensioni delle TD totalmente diverse!!!
In pratica io ho bisogno che venga visualizzata la seconda griglia ma in
modo che le dimensioni siano rispettate come accade per la prima griglia.
Perchè avviene questo? Qualcuno può aiutarmi?
Grazie dell'aiuto.
    Ciao
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.mainTable {
    overflow: hidden;
    table-layout: fixed;
    white-space: nowrap;
    background-color: Yellow;
    border: 1px solid Blue;
}
</STYLE>
</HEAD>
<BODY>
<TABLE cellpadding=0 cellspacing=0 class="mainTable" width=500px>
<TR>
<TD class="mainTable" width=10px><DIV>Int 1</DIV></TD>
<TD class="mainTable" width=20px><DIV>Int 2</DIV></TD>
<TD class="mainTable" width=141px><DIV>Int 3</DIV></TD>
<TD class="mainTable" width=329px><DIV>Int 4</DIV></TD>
</TR>
<TR>
<TD class="mainTable" colspan=2><DIV>SubInt 1-2</DIV></TD>
<TD class="mainTable"><DIV>SubInt 3</DIV></TD>
<TD class="mainTable"><DIV>SubInt 4</DIV></TD>
</TR>
<TR>
<TD class="mainTable" width=10px><DIV>1 asdf rety</DIV></TD>
<TD class="mainTable" width=20px><DIV>2</DIV></TD>
<TD class="mainTable" width=141px><DIV>3</DIV></TD>
<TD class="mainTable" width=329px><DIV>4</DIV></TD>
</TR>
</TABLE>
<BR>
<TABLE cellpadding=0 cellspacing=0 class="mainTable" width=500px>
<TR>
<TD class="mainTable" colspan=2><DIV>SubInt 1-2</DIV></TD>
<TD class="mainTable"><DIV>SubInt 3</DIV></TD>
<TD class="mainTable"><DIV>SubInt 4</DIV></TD>
</TR>
<TR>
<TD class="mainTable" width=10px><DIV>Int 1</DIV></TD>
<TD class="mainTable" width=20px><DIV>Int 2</DIV></TD>
<TD class="mainTable" width=141px><DIV>Int 3</DIV></TD>
<TD class="mainTable" width=329px><DIV>Int 4</DIV></TD>
</TR>
<TR>
<TD class="mainTable" width=10px><DIV>1 asdf rety</DIV></TD>
<TD class="mainTable" width=20px><DIV>2</DIV></TD>
<TD class="mainTable" width=141px><DIV>3</DIV></TD>
<TD class="mainTable" width=329px><DIV>4</DIV></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Ho trovato la soluzione!
In w3c è spiegato l'algoritmo di risoluzione delle larghezze delle TD quando
si utilizza l'attributo table-layout:fixed
(
http://www.w3.org/TR/REC-CSS2/tables.html#fixed-table-layout
) in base a
quanto spiegato ho modificato l'esempio in questo modo (funziona anche con
le TD nascoste!):
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.mainTable {
    overflow: hidden;
    table-layout: fixed;
    white-space: nowrap;
    background-color: Yellow;
    border: 1px solid Blue;
}
</STYLE>
</HEAD>
<BODY>
<TABLE cellpadding=0 cellspacing=0 class="mainTable" width=500px>
<COLGROUP>
<COL width=10px>
<COL width=30%>
<COL width=70%>
</COLGROUP>
<TR>
<TD class="mainTable" colspan=2><DIV>SubInt 1-2</DIV></TD>
<TD class="mainTable" style="{display:none}"><DIV>SubInt 3</DIV></TD>
<TD class="mainTable"><DIV>SubInt 4</DIV></TD>
</TR>
<TR>
<TD class="mainTable"><DIV>Int 1</DIV></TD>
<TD class="mainTable"><DIV>Int 2</DIV></TD>
<TD class="mainTable" style="{display:none}"><DIV>Int 3</DIV></TD>
<TD class="mainTable"><DIV>Int 4</DIV></TD>
</TR>
<TR>
<TD class="mainTable"><DIV>1 asdf rety</DIV></TD>
<TD class="mainTable"><DIV>2</DIV></TD>
<TD class="mainTable" style="{display:none}"><DIV>3</DIV></TD>
<TD class="mainTable"><DIV>4</DIV></TD>
</TR>
</TABLE>
</BODY>
</HTML>