私は最近これを自分で理解しようとしていましたが、ブラウザ (Chrome 51) で完全に動作し、動的な列幅をサポートする優れたソリューションを思いつきました。私が独自に答えを導き出した後、ウェブ上の他の場所で説明されている同様の手法も見つけたことに言及する必要があります...
コツは、2 つの同一のテーブルを重ねて使用することです。下の表は表示され、上の表はヘッダーを除いて表示されません。上のテーブルもpointer-events: nonetbody に設定されているため、マウス操作は下のテーブルにヒットします。このようにして、下のテーブルが上のテーブルのヘッダーの下にスクロールします。
すべてを適切にレイアウトおよびサイズ変更するには (たとえば、ユーザーが画面幅を調整する場合)、両方のテーブルのスクロールバーの動作が同じである必要があります。ただし、上のテーブルのスクロール バーは のおかげで無視され、次の方法で非pointer-events: none表示にすることができます。
<style>
.hiddenScrollbar::-webkit-scrollbar {
background-color: transparent;
}
</style>
完全なコードは次のとおりです。
<html>
<head>
<style>
td {
border: 1px solid black;
white-space: nowrap;
}
th {
background-color: gray;
border: 1px solid black;
white-space: nowrap;
}
.hiddenScrollbar::-webkit-scrollbar {
background-color: transparent;
}
</style>
</head>
<body>
Table test. Use mouse wheel to scroll or scroll to the right to see vertical scroll bar. You can also remove the outermost div if you don't want a horizontal scroll bar.
<br/>
<div style="display: inline-block; height: 10em; width: 15em; overflow-x: scroll; overflow-y: hidden">
<div style="position: relative;">
<div style="display: inline-block; position: absolute; left: 0px; top: 0px; height: 10em; overflow-y: scroll">
<table style="border-collapse: collapse;">
<thead>
<tr>
<th>Column 1</th>
<th>Another Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 2</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 3</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 4</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 5</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 6</td>
<td>12340921375021342354235 very long...</td>
</tr>
<tr>
<td>Data 7</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 8</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 9</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 10</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 11</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 12</td>
<td>123409213750213</td>
</tr>
</tbody>
</table>
</div>
<div class="hiddenScrollbar" style="display: inline-block; pointer-events: none; position: relative; left: 0px; top: 0px; height: 10em; overflow-y: scroll">
<table style="border-collapse: collapse;">
<thead style="pointer-events: auto">
<tr>
<th>Column 1</th>
<th>Another Column</th>
</tr>
</thead>
<tbody style="visibility: hidden">
<tr>
<tr>
<td>Data 1</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 2</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 3</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 4</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 5</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 6</td>
<td>12340921375021342354235 very long...</td>
</tr>
<tr>
<td>Data 7</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 8</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 9</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 10</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 11</td>
<td>123409213750213</td>
</tr>
<tr>
<td>Data 12</td>
<td>123409213750213</td>
</tr>
</tr>
</tbody>
</table>
</div>
</div>
</div><br/>
Stuff after table.
</body>
</html>
警告: これが他のブラウザで機能することを証明するには、さらに作業が必要です。また、私はインラインとスタイルシートのスタイルを自由に組み合わせることができました。ただし、ターゲットブラウザがサポートしている場合、一般的な概念がこれを行うための最良の方法であると私は信じています。唯一の機能/表示の問題は、水平スクロール バーが必要な場合、垂直スクロール バーがスクロールして表示されなくなる可能性があることです(スニペットに示すように)。ただし、マウスホイールでスクロールすることはできます。さらに、ヘッダーの背景を透明にすることはできません(そうしないと、下のテーブルが透けて見えてしまいます)。最後に、2 つの同一のテーブルを生成する方法が必要です。個人的にはreact.jsを使っていてreactで簡単にできますが、phpなどのサーバーサイド生成やjavascriptでも動きます。