Question

我想创建一个表，其中每行都有一个可展开的详细信息行。请参阅以下简化示例代码。单击可见表中的行时，应克隆隐藏表中的相应行并将其插入单击的行下方 - 从而创建扩展的行效果。再次单击将删除详细信息行。

问题在于，在第二行或第三行展开时，在IE8（可能还有其他版本）中，列的宽度会发生变化。第一行没有。差异似乎是详细信息行中内容的长度。在Firefox 3.5中查看相同的示例，无论细节内容的长度如何，您都会看到列保持其原始宽度。为什么会发生这种情况？如何解决？

附加的jQuery是1.2.6，但无论版本如何，效果都应该相同。

<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>

Answer 1

展开第二行或第三行时，列的宽度会发生变化。

是的，如果你想要真正尊重你的宽度，你需要table-layout: fixed上的样式<table>。否则你将受auto table layout算法的支配，这通常是不可预测的（当涉及到colspan时，在IE中特别难以理解）。

使用fixed table layout，您可以在表格的第一行中的单元格上设置显式宽度，或者更好地在<col>元素上设置显式宽度。而他们实际上坚持。而且它渲染得更快。

IE在动态添加行时调整表列的大小

1 个答案: