Home/ Questions/Q 777801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T19:39:56+00:00

I want to create a table where each row has an expandable details row.

  • 0

I want to create a table where each row has an expandable details row. See the below simplified example code. Upon clicking a row in the visible table, the corresponding row from the hidden table should be cloned and inserted below the clicked row — thus creating an expanded row effect. A second click removes the details row.

The problem is that in IE8 (and possibly other versions) when the second or third row is expanded, the width of the columns change. The first row doesn’t. The difference appears to be the length of the content in the details row. Viewing this same example in Firefox 3.5, you’ll see the columns maintain their original widths regardless of the length of the detail content. Why does this happen and how can it be fixed?

The attached jQuery is 1.2.6, but the effect should be the same regardless of the 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    when the second or third row is expanded, the width of the columns change.

    Yeah, you’ll need style table-layout: fixed on the <table> if you want your widths to be actually respected. Otherwise you are at the mercy of the auto table layout algorithm, which is generally unpredictable (and especially wonky in IE when colspan is involved).

    With fixed table layout you set the explicit widths on the cells in the first row of the table, or, better, on <col> elements. And they actually stick. Plus it renders quicker.

    • 0