我目前有两个彼此重叠的表。前台只显示它的标题，正文使用 css“visibility:hidden”隐藏。此表使用“position:absolute”使其卡住到位，该表是第二个表的完整克隆。
当我在 IE 上测试时，第二个表的 tbody 上的下拉菜单和链接工作正常，但是当我在 chrome 上测试它时，无法单击第二个表，因为它被前面隐藏的表体挡住了它的。
是否有任何替代方法可用于在 chrome 上实现 header 的卡住？
注意:将加载的数据是动态的，具有不同的大小。每列的宽度将相应调整。
这是一个示例代码，但它在 fiddle 上运行良好，但在用作 html 文件并在 chrome 上运行时将无法运行:https://fiddle.jshell.net/3poz4o4q/3/
添加了我测试过的整个 HTML 文件。 从这里得到 jquery http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js 并将其保存在文件名“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>
最佳答案
请尝试 'div class="table-header"id="tableHeader"style="z-index:-1"'; 把header div放到后面；
关于javascript - 用于卡住表格标题的 Chrome css 绝对位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41508417/