quarta-feira, 30 de setembro de 2009

Tabela com múltiplos THEAD versus TBODY (IE Quirk)

Caso se crie uma table com mais do que um thead, algo deste género:


<table id="myTable" cellspacing="0px">
<thead>
<tr>
<th colspan="7">Outubro</th>
</tr>
<tr>
<th>Domingo</th>
<th>2ª-Feira</th>
<th>3ª-Feira</th>
<th>4ª-Feira</th>
<th>5ª-Feira</th>
<th>6ª-Feira</th>
<th>Sábado</th>
</tr>
</thead>
<thead class="days">
<tr>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
</tr>
</thead>
<tbody>
<tr>
<td>TESTE</td>
...
</tr>
...
</tbody>
<tfoot>
...
</tfoot>
</table>

Tudo funciona perfeitamente (em FF3.0.14 ou no IE6.02900), inclusive aplicar CSS específico ao thead cuja class="days".


Mas se tentarem aceder por javascript ao array the objectos tBodies da tabela, as coisas ai mudam de figura.


var myTable = document.getElementById( 'myTable' );

var rows = myTable.tBodies[0].rows;

alert( 'Dados da primeira coluna do body = ' + rows[0].cells[0].innerHTML );

No caso do FF, retorna exactamente o esperado "TESTE", no entanto, no caso do IE vai retornar "4" ou seja, o conteúdo da primeira coluna do segundo thead.


Isto acontece porque o IE, erradamente associa o segundo thead (days), como se fosse o primeiro tbody, o que claramente não é, inclusivamente é incoerente com a aplicação de estilos, que essa sim funciona correctamente.


A solução para o problema, passa por fugir dele :) isto é, evitar o uso do thead adicional, e aplicar o estilo (class) directamente no tr. Não esquecer de actualizar o CSS de forma a corresponder com a alteração efectuada.


<table id="myTable" cellspacing="0px">
<thead>
<tr>
<th colspan="7">Outubro</th>
</tr>
<tr>
<th>Domingo</th>
<th>2ª-Feira</th>
<th>3ª-Feira</th>
<th>4ª-Feira</th>
<th>5ª-Feira</th>
<th>6ª-Feira</th>
<th>Sábado</th>
</tr>
<tr class="days">
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
</tr>
</thead>
...
</table>