个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我想创建一个表格，其中每一行都有一个可展开的详细信息行。请参阅下面的简化示例代码。单击可见表中的一行后，应复制隐藏表中的相应行并将其插入到单击的行下方——从而创建展开的行效果。第二次点击删除详细信息行。
问题在于，在 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
我正在 csv 上使用 hadoop 来分析一些数据。我使用sql/mysql(不确定)来分析数据，现在陷入了僵局。 我花了好几个小时在谷歌上搜索，却没有找到任何相关的东西。我需要一个查询，在该查询中
我正在为 Bootstrap 网格布局的“简单”任务而苦苦挣扎。我希望在大视口(viewport)上有 4 列，然后在中型设备上有 2 列，最后在较小的设备上只有 1 列。 当我测试我的代码片段时，似
对于这个令人困惑的标题，我深表歉意，我想不出这个问题的正确措辞。相反，我只会给你背景信息和目标: 这是在一个表中，一个人可能有也可能没有多行数据，这些行可能包含相同的 activity_id 值，也可
具有 3 列的数据库表 - A int , B int , C int 我的问题是: 如何使用 Sequelize 结果找到 A > B + C const countTasks = await Ta
我在通过以下功能编写此查询时遇到问题: 首先按第 2 列 DESC 排序，然后从“不同的第 1 列”中选择 只有 Column1 是 DISTINCT 此查询没有帮助，因为它首先从第 1 列中进行选择
使用 Bootstrap 非常有趣和有帮助，目前我在创建以下需求时遇到问题。 “使用 bootstrap 在桌面上有 4 列，在平板电脑上有 2 列，在移动设备上有 1 列”谁能告诉我正确的结构 最佳
我是 R 新手，正在问一个非常基本的问题。当然，我在尝试从所提供的示例中获取指导的同时做了功课here和 here ，但无法在我的案例中实现这个想法，即可能是由于我的问题中的比较维度更大。 我的实
通常我会使用 R 并执行 merge.by，但这个文件似乎太大了，部门中的任何一台计算机都无法处理它! (任何从事遗传学工作的人的附加信息)本质上，插补似乎删除了 snp ID 的 rs 数字，我只剩
我有一个 df , delta1 delta2 0 -1 2 0 -1 0 0 0 我想知道如何分配 delt
您好，我想知道是否可以执行以下操作。显然，我已经尝试在 phpMyAdmin 中运行它，但出现错误。也许还有另一种方式来编写此查询。 SELECT * FROM eat_eat_restaurants
我有 2 个列表(标题和数据值)。我想要将数据值列 1 匹配并替换为头文件列 1，以获得与 dataValue 列 1 和标题值列 2 匹配的值 头文件 TotalLoad,M0001001 Hois
我有两个不同长度的文件，file2 是一个很大的引用文件，我从中提取文件 1 的数据。 我有一行 awk，我通常会对其进行调整以在我的文件中进行查找和替换，但它总是在同一列中进行查找和替换。 所以对于
假设我有两个表，如下所示。 create table contract( c_ID number(1) primary key, c_name varchar2(50) not
我有一个带有 varchar 列的 H2 表，其检查约束定义如下: CONSTRAINT my_constraint CHECK (varchar_field <> '') 以下插入语句失败，但当我删
这是最少量的代码，可以清楚地说明我的问题: One Two Three 前 2 个 div 应该是 2 个左列。第三个应该占据页面的其余部分。最后，我将添加选项来隐藏和
在 Azure 中的 Log Analytics 中，我为 VM Heartbeat 选择一个预定义查询，我在编辑器中运行查询正常，但当我去创建警报时，我不断收到警报“查询未返回 TimeGenera
在 Azure 中的 Log Analytics 中，我为 VM Heartbeat 选择一个预定义查询，我在编辑器中运行查询正常，但当我去创建警报时，我不断收到警报“查询未返回 TimeGenera
今天我开始使用 JexcelApi 并遇到了这个:当您尝试从特定位置获取元素时，不是像您通常期望的那样使用sheet.getCell(row,col)，而是使用sheet.getCell(col,ro
我有一个包含 28 列的数据库。第一列是代码，第二列是名称，其余是值。 public void displayData() { con.Open(); MySqlDataAdapter
我很沮丧:每当我缩小这个网页时，一切都变得一团糟。我如何将网页居中，以便我可以缩小并且元素不会被错误定位。 (它应该是 2 列，但所有内容都合并为 1)我试过 但由于某种原因，这不起作用。 www.o
我是一名优秀的程序员,十分优秀！