I currently have two tables that is on top of each other. the front table only shows it's header and the body is hidden using the css "visibility:hidden". this table is using "position:absolute" to make it freeze in place, the table is a complete clone of the 2nd table.
As i was testing on IE, the dropdown and link on the tbody of the 2nd table is working fine but when i tested it on chrome, the 2nd table cannot be clicked as it was blocked by the hidden table body in-front of it.
Are there any alternatives that i can use to implement the freezing of headers on chrome?
Note: The data that will be loaded is dynamically with different sizes. the width of each column will be adjusted accordingly.
Here is a sample code but this works fine on fiddle but won't be working when used as html file and run on chrome: https://fiddle.jshell.net/3poz4o4q/3/
Added the whole HTML file that i tested with. Got the jquery from here http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js and saved it on the file name "jquery-1.9.1.min.js" and referenced it.
<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>
