I want to create a table in which each row has an extensible row of information. See the simplified sample code below. After clicking a row in the visible table, the corresponding row from the hidden table should be cloned and inserted below the clicked row, which creates the effect of an extended row. A second click deletes the details line.
The problem is that in IE8 (and possibly in other versions), when the second or third row expands, the width of the columns changes. The first line is not. The difference seems to be the length of the content in the details bar. Looking at the same example in Firefox 3.5, you will see that the columns maintain their original width regardless of the length of the detailed content. Why is this happening and how can it be fixed?
The attached jQuery is 1.2.6, but the effect should be the same regardless of version.
<html> <head> <style type="text/css"> table#primary { width: 504px; border-collapse: collapse; } table#primary, table#primary tr, table#primary th, table#primary td, { padding: 0; margin: 0; } table#primary td { border: 1px solid black; } td.time { width: 100px; } td.title { width: 300px; } td.room { width: 100px; } table#secondary { display: none; } </style> <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("table#primary tr").click(function() { toggleDetails($(this)); }); }); function toggleDetails(row) { if (row.hasClass("expanded")) { hideDetails(row); } else { showDetails(row); } } function showDetails(row) { var id = row.attr("id"); var detailsRow = $("tr#details_" + id).clone(true); detailsRow.insertAfter(row); row.addClass("expanded"); } function hideDetails(row) { row.removeClass("expanded"); row.next().remove(); } </script> </head> <body> <table id="primary"> <thead> <th>Time</th> <th>Title</th> <th>Room</th> </thead> <tbody> <tr id="one"> <td class="time">11:00 am</td> <td class="title">First</td> <td class="room">101A</td> </tr> <tr id="two"> <td class="time">12:00 pm</td> <td class="title">Second</td> <td class="room">206A</td> </tr> <tr id="three"> <td class="time">1:00 pm</td> <td class="title">Third</td> <td class="room">103B</td> </tr> </tbody> </table> <table id="secondary"> <tbody> <tr id="details_one"> <td colspan="3">Lorem ipsum one. Lorem ipsum one.</td> </tr> <tr id="details_two"> <td colspan="3">Lorem ipsum two. Lorem ipsum two. Lorem ipsum two. Lorem ipsum two. Lorem ipsum two. Lorem ipsum two.</td> </tr> <tr id="details_three"> <td colspan="3">Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three. Lorem ipsum three.</td> </tr> </tbody> </table> </body> </html>
source share