CODEWITHSUNDEEP
jqueryhtmlinternet-explorerhtml-tablewidth
Jay
Jay

Reputation: 13

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?

Upvotes: 1

Views: 452

Answers (3)

james li
james li

Reputation: 184

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>

Upvotes: 0

Guffa
Guffa

Reputation: 700302

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/

Upvotes: 0

Dirk van Bergen
Dirk van Bergen

Reputation: 245

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

Upvotes: 1

Related Questions