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

【问题标题】：IE resizes table columns when dynamically adding rowsIE在动态添加行时调整表列大小
【发布时间】：2011-02-15 06:01:30
【问题描述】：

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

问题在于，在 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>

【问题讨论】：

标签： javascript html css internet-explorer

【解决方案1】：

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

是的，如果您希望真正尊重您的宽度，则需要在 <table> 上添加样式 table-layout: fixed。否则，您将受制于 auto table layout 算法，该算法通常是不可预测的（尤其是在涉及 colspan 时在 IE 中不稳定）。

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

【讨论】：