Question

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?

Answer 1

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