Javascript 用于冻结表格标题的Chrome css绝对位置
我现在有两张桌子，两张桌子在一起。前表仅显示其标题，而正文使用css“visibility:hidden”隐藏。此表使用“位置：绝对”使其冻结到位，该表是第二个表的完整克隆 当我在IE上测试时，第二个表的tbody上的下拉和链接工作正常，但当我在chrome上测试时，第二个表无法单击，因为它被前面的隐藏表阻止 有没有其他方法可以用来在chrome上冻结头文件 注意：将加载的数据具有不同的大小。每列的宽度将相应调整Javascript 用于冻结表格标题的Chrome css绝对位置,javascript,jquery,html,css,google-chrome,Javascript,Jquery,Html,Css,Google Chrome,我现在有两张桌子，两张桌子在一起。前表仅显示其标题，而正文使用css“visibility:hidden”隐藏。此表使用“位置：绝对”使其冻结到位，该表是第二个表的完整克隆 当我在IE上测试时，第二个表的tbody上的下拉和链接工作正常，但当我在chrome上测试时，第二个表无法单击，因为它被前面的隐藏表阻止 有没有其他方法可以用来在chrome上冻结头文件 注意：将加载的数据具有不同的大小。每列的宽度将相应调整 下面是一个示例代码，但它在fiddle上运行良好，但在用作html文件并在chro
下面是一个示例代码，但它在fiddle上运行良好，但在用作html文件并在chrome上运行时不起作用： 添加了我测试的整个HTML文件。 从这里得到jquery 并将其保存在文件名“jquery-1.9.1.min.js”中并引用
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script>
function onLoad() {
var cloneData = $('#actualData tr').clone(false);
$("#sampleData").append(cloneData);
var cloneHeader = $('#behindHeader tr').clone();
$("#showingHeader").append(cloneHeader);
$("#sampleData").css("visibility", "collapse");
$("#behindHeader").css("visibility", "collapse");
$("#tableHeader").css("position", "absolute");
}
</script>
<body onload="onLoad()">
<div class="table-header" id="tableHeader">
<table class="editableTable" id="editTable" border="1">
<thead id="showingHeader"/>
<tbody id="sampleData"/>
</table>
</div>
<div class="table-body" id="tableBody">
<table class="editableTable" id="bodytable" border="1">
<thead id="behindHeader">
<tr id="entity-header">
<th colspan="13">
<a id="Create Something">Create Something</a>
<a id="Create another thing">Create another thing</a>
<a href="#" id="save">Save</a>
</th>
</tr>
<tr id="column-headers">
<th id="data link">data link</th>
<th id="data 1">data 1</th>
<th id="data 2">data 2</th>
<th id="data 3">data 3</th>
<th id="data 4">data 4</th>
<th id="data 5">data 5</th>
<th id="data 6">data 6</th>
<th id="drop down 1">drop down 1</th>
<th><span id="checkbox 1">checkbox 1</span></th>
<th id="drop down 2">drop down 2</th>
<th><span id="checkbox 2">checkbox 2</span></th>
<th id="drop down 3">drop down 3</th>
<th><span id="checkbox 3">checkbox 3</span></th>
</tr>
</thead>
<tbody id="actualData">
<tr id="actual id" class="modified">
<td ><a href="#" >Data ID</a></td>
<td >Data Description 1</td>
<td >Data Description 2</td>
<td >Data Description 3</td>
<td >Data Description 4</td>
<td >Data Description 6</td>
<td >Data Description 7</td>
<td >
<select>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
<td >
<div class="checkbox">
<input id="1" type="checkbox"><label for="1"></label>
</div>
</td>
<td >
<select>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</select></td>
<td >
<div class="checkbox">
<input id="2" type="checkbox"><label for="2"></label>
</div>
</td>
<td >
<select disabled="disabled">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
<td >
<div class="checkbox" disabled="disabled">
<input id="3" type="checkbox" disabled="disabled"><label for="3" disabled="disabled"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
函数onLoad（）{
var cloneData=$（'#actualData tr'）.clone（false）；
$（“#样本数据”）.append（克隆数据）；
var cloneHeader=$（'#behindHeader tr'）.clone（）；
$（“#showingHeader”）.append（克隆头）；
$（“#sampleData”）.css（“可见性”、“折叠”）；
$（“#behindHeader”）.css（“可见性”、“折叠”）；
$（“#tableHeader”）.css（“位置”、“绝对”）；
}
数据链路
数据1
数据2
数据3
数据4
数据5
数据6
下拉列表1
复选框1
下拉列表2
复选框2
下拉列表3
复选框3
数据说明1
数据说明2
数据说明3
数据说明4
数据说明6
数据说明7
1.
2.
3.
1.
2.
1.
2.
3.
将收割台div向后放置 寻求调试帮助的问题（“为什么此代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现此问题所需的最短代码。请添加您的代码。请添加可能重复的代码“这是一个示例代码，但它在fiddle上可以正常工作，但当用作html文件并在chrome上运行时将不起作用”您可能没有正确调用jQuery。已经添加了代码。我创建了jQuery的本地副本并引用了它。在IE上，所有链接、文本框和下拉列表都可以工作，但在chrome上，它是不可访问的。出现此问题的全部原因是”table header“div是创建一个浮动标题，即使表格向下滚动，它也会粘在表格的顶部。将“table header”div放在后面对小尺寸表格有效，但当表格足够长，可以滚动时，前面的表格在滚动后会模糊“table header”div的可见性。