Toggling visibility inside <table> in IE causes <thead> cells to re-size, despite being fixed in width

Fiddle demo available here: http://jsfiddle.net/r9MCW/5/

The functionality

Basically, I have a very simple table with a <thead> and two rows (3 total). Clicking row 2 toggles visibility of content in row 3. Like so:

<table width="100%" border="1" cellpadding="0" cellspacing="0">
<thead>
    <tr>
        <th style="width:60px;">A</th>
        <th style="width:50px;">B</th>
        <th style="width:40px;">C</th>
        <th style="width:30px;">D</th>
    </tr>
</thead>
<tr class="clickme">
    <td colspan="4">Click Me!</td>
</tr>        
<tr>
    <td colspan="4">
        <div class="target">
       开发者_高级运维     Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet [...]
        </div>
    </td>
</tr>
</table>

Clicking <tr class="clickme"> shows/hides <div class="target"> with some very simple jQuery using the toggle() function.

The problem

IE7, IE8 and IE9 all re-size the <th> widths every time the toggle runs. See fiddle. How can I stop this from happening?

---

It's because your TH widths don't add up to the actual 100% width of the table.

There are 2 ways you can go about this:

• Change TH widths to percentages and make them add up to 100%
• Change Table width to a set pixel width and make the TH widths add up to that

---

When you use pixels for the size, it's just a recommendation and a minimum. When the table is wider than 180px it will distribute the extra space any way it sees fit.

If you want to specify the widths exactly the widths of the cells have to add up to the width of the table. As you are using percent on the widht of the table, you have to use percent on the widths of the cells also:

http://jsfiddle.net/r9MCW/13/

---

it seems the width of the content td tag changed while toggling in ie. giving this td a stable value (e.g. 100%) will solve the problem.

<td width="100%" colspan="4">
        <div class="target">
            Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet [...]
        </div>
 </td>