The table header doesn't show

[reignile]

extjs 2.0.2, when using form-markup.js to render an existing HTML table, the header of the table run away, i don't know why
The structure of the existing table is like the following:

<table id='..'>
<thead> 
   <tr>..</tr>
</thead>
<tbody>
   <tr>...</tr>
</tboby>
</table>

I even modify ext-all.css and change

.x-grid3-header-offset{padding-left:1px;width:10000px;}

to

.x-grid3-header-offset{padding-left:1px;width:auto;}

But it doesn't help

Updated: the header appears in IE, but very very ugly and in Firefox, it doesn't show up at all

[aconran]

Have you specified a width or height when creating the TableGrid?

Are you using th's within your thead?

Could you post some more code so that we could try to troubleshoot this further?

[reignile]

Actually, the table is created using php dynamically

<?php
...
echo "<TH>Product</TH>;
...
?>

The whole structure is like

<TABLE cellspacing='0' id='mytesttable'>
<thead>
<TR style='background:#eeeeee;'>
<TH>Product</TH>
<TH>Date</TH>
<TH>Owener</TH>
</thead>
<tbody>
<TR><TD><center><B>Hello1<B></center></TD><TD>2007-01-01</TD><TD><a href='url'>ME</a></TD></TR>
<TR><TD><center><B>Hello2<B></center></TD><TD>2007-01-02</TD><TD><a href='url'>Y</a></TD></TR>
</tbody>
</table>

In from-markup.js (extjs 2.0.2 version)

I change

  var btn = Ext.get("create-grid");
  btn.on("click", function(){
    btn.dom.disabled = true;

    // create the grid
    var grid = new Ext.grid.TableGrid("the-table", {
      stripeRows: true // stripe alternate rows
    });
    grid.render();
  }, false, {single:true}); // run once

to

 
   var grid = new Ext.grid.TableGrid("mytesttable", {
       stripeRows: true // stripe alternate rows
   });
   grid.render();

In Firefox, the grid header is missing.
In IE 7, the grid header shows up, but when I chose 'Columns' and unselect 'Date' column, the table became very ugly because the table header will be align left and the tbody is align center, like
___________________________
|Product | Owner | |
-------------------------------
  | Hello1 | ME |  
  --------------  
  | Hello2 | Y |  
-------------------------------
Thanks~

[aconran]

Before troubleshooting further can you test out Ext 2.1?

[reignile]

I tried 2.1 just now and this time Firefox can show the table header normally like IE. But when I unselect some column, the same problem still exists, the table header will be align left while the tbody will be align center. Is there anything wrong with my HTML table? Or do I have to disable the unselect column feature? Thanks~