ヘッダー行と最初の列が固定された実際の純粋なCSSソリューション
純粋なCSSを使用して、固定ヘッダーと固定の最初の列の両方を含むテーブルを作成する必要があり、ここでの答えはどれも私が望んでいたものとまったく同じではありませんでした。
このposition: stickyプロパティは、Chrome、Firefox、およびEdgeの最新バージョンの上部（側面で最もよく使用することを確認した）と側面の両方をサポートします。これdivは、overflow: scrollプロパティを持つと組み合わせることができ、ページのどこにでも配置できる固定ヘッダー付きのテーブルを提供します。
テーブルをコンテナに配置します。
<div class="container">
<table></table>
</div>
overflow: scrollコンテナーで使用してスクロールを有効にします。
div.container {
overflow: scroll;
}
以下のようダグマーはコメントで指摘し、コンテナも必要ですmax-widthし、max-height。
使用position: stickyテーブルセルがエッジに固執し、持っているtop、rightまたはleftに固執しているエッジを選択します：
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
MarredCheeseとしてコメントで述べたあなたの最初の列が含まれている場合は、<td>代わりの要素<th>の要素を、あなたは使用することができtbody td:first-child、あなたのCSSではなく、tbody th
最初の列のヘッダーを左側に固定するには、以下を使用します。
thead th:first-child {
left: 0;
z-index: 1;
}
/* Use overflow:scroll on your container to enable scrolling: */
div {
max-width: 400px;
max-height: 150px;
overflow: scroll;
}
/* Use position: sticky to have it stick to the edge
* and top, right, or left to choose which edge to stick to: */
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
tbody th {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
/* To have the header in the first column stick to the left: */
thead th:first-child {
left: 0;
z-index: 2;
}
/* Just to display it nicely: */
thead th {
background: #000;
color: #FFF;
/* Ensure this stays above the emulated border right in tbody th {}: */
z-index: 1;
}
tbody th {
background: #FFF;
border-right: 1px solid #CCC;
/* Browsers tend to drop borders on sticky elements, so we emulate the border-right using a box-shadow to ensure it stays: */
box-shadow: 1px 0 0 0 #ccc;
}
table {
border-collapse: collapse;
}
td,
th {
padding: 0.5em;
}
<div>
<table>
<thead>
<tr>
<th></th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
<th>headheadhead</th>
</tr>
</thead>
<tbody>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
<tr>
<th>head</th>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
<td>body</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/qwubvg9m/1/
