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

Question

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

Jav*_*cMD 4 html javascript css internet-explorer

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

问题是在扩展第二行或第三行时,在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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

bob*_*nce 6

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

是的,你需要的风格table-layout: fixed上<table>,如果你希望你的宽度,以实际尊重.否则你将受到自动表格布局算法的支配,这种算法通常是不可预测的(当涉及到colspan时,在IE中特别难以理解).

使用固定表格布局,您可以在表格的第一行中的单元格上设置显式宽度,或者更好地在<col>元素上设置显式宽度.而他们实际上坚持.而且它渲染速度更快.

归档时间：	15 年，7 月前
查看次数：	1996 次
最近记录：	15 年，7 月前