gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 12:29:38 25 4
gpt4 key购买 nike

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

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

最佳答案

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

是的,你需要风格 table-layout: fixed<table> 上如果你想让你的宽度得到真正的尊重。否则你将受到 auto table layout 的摆布。算法,这通常是不可预测的(当涉及 colspan 时,在 IE 中尤其不稳定)。

fixed table layout您在表格第一行的单元格上设置显式宽度,或者更好的是,在 <col> 上元素。他们实际上坚持。此外,它呈现速度更快。

关于javascript - IE 在动态添加行时调整表格列的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2761820/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com