0
私は現在、お互いの上にある2つのテーブルを持っています。正面表はヘッダーのみを表示し、本文はcss "visibility：hidden"を使用して非表示にします。このテーブルは "position：absolute"を使用して固定し、テーブルは2番目のテーブルの完全なクローンです。テーブルヘッダーを凍結するためのChromeのcssの位置
IEでテストしていたので、2番目のテーブルのtbodyのドロップダウンとリンクはうまくいきましたが、私がChromeでテストしたところ、2番目のテーブルは隠れたテーブル本体がブロックされているので、それの正面。
私はクロムにヘッダーのフリーズを実装するために使用できる代替方法はありますか？
注：ロードされるデータは、さまざまなサイズで動的に表示されます。それに応じて各列の幅が調整されます。ここで
は、サンプルコードであるが、これはフィドルに正常に動作しますが、htmlファイルとして使用した場合に動作していないだろうとクローム上で実行：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>
デバッグヘルプ（「なぜこのコードは動作しませんか？）」には、目的の動作、特定の問題またはエラー、およびそれを再現するのに必要な最短コードが**含まれている必要があります**。 – Pete
コードを追加してください –
[HTMLテーブルにスクロールバーを表示するにはどうすればいいですか？]（http://stackoverflow.com/questions/8232713/how-to-display-scroll-bar-onto-a-html-テーブル） – greenhoorn