純粋な css は、固定ヘッダーとテーブルの最初の列を実現します (IE とは互換性がありません)。

css の位置はここで使用されます: sticky; (このスタイルは IE ブラウザのサポートが不十分です)

1. 最初の行のヘッダーは固定であり、スクロールバーでスクロールしません。
html フォーム:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表格固定表头</title>
 </head>  
<body>
<div>
  <table cellspacing="0" border="0" cellpadding="0">
    <thead>
		  <tr>
			<th style="width:50px">Title1</th>
			<th>Title</th>
			<th>Title</th>
			<th>Title</th>
			<th>Title</th>
			<th>Title</th>
			<th>Title</th>
			<th>Title</th>
		  </tr>
		</thead>
		<tbody>
		  <tr>
			<td>text</td><td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<td>text</td><td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<td>text</td><td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<td>text</td><td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<td>text</td><td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<td>text</td><td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<td>text</td><td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<td>text</td><td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<td>text</td><td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<td>text</td><td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<td>text</td><td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td><td>text</td>
		  </tr>
		</tbody>
  </table>
</div>
</body>
</html>

CSS コード:

  <style>
    div{
    
    
      overflow:auto;
      width:400px;
      height:250px; /* 固定高度 */
      border:1px solid gray;
      border-bottom: 0;
      border-right: 0;
    }
	table {
    
    
      border-collapse:separate;
      table-layout: fixed;
      width: 100%; /* 固定寬度 */
	  word-break:break-all;/*内容自动换行*/
    }
	th {
    
    
      position:sticky;/* 首行固定 */
	  z-index:1;
      top:0; 
      background-color:lightblue;
    }
    td, th {
    
    
      border-right :1px solid gray;
      border-bottom :1px solid gray;
      width:100px;
      height:30px;
      box-sizing: border-box;
	  text-align:center;
    }
  </style>

Google の効果は次のとおりです: 1 行目は水平方向にスクロール可能で、垂直方向は固定です.
ここに画像の説明を挿入
2. 表の 1 行目と 1 列目は固定です.
表の html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首行首列固定</title>
 </head>  
<body>
<div>

  <table cellspacing="0" border="0" cellpadding="0">

    <thead>
		  <tr>
			<th>Title</th><th>Title</th><th>Title</th>
			<th>Title</th><th>Title</th><th>Title</th>
			<th>Title</th><th>Title</th><th>Title</th>
		  </tr>
		</thead>
		<tbody>
		  <tr>
			<th>Title</th><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<th>Title</th><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<th>Title</th><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<th>Title</th><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<th>Title</th><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<th>Title</th><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<th>Title</th><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<th>Title</th><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<th>Title</th><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<th>Title</th><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<th>Title</th><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
		  </tr>
		  <tr>
			<th>Title</th><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
			<td>text</td><td>text</td><td>text</td>
		  </tr>
		</tbody>
  </table>
</div>
</body>
</html>

CSS:

<style>
    /*外层div，设置宽高度*/
    div{
    
    
      overflow:auto;
      width:400px;
      height:250px;
      border:1px solid gray;
      border-bottom: 0;
      border-right: 0;
    }
	table {
    
    
      border-collapse:separate;/*设置边框会被分开，而不是合并*/
      table-layout: fixed;/*列宽由表格宽度和列宽度设定。*/
      width: 100%;
	  word-break:break-all;/*内容自动换行*/
    }
    th {
    
    
      background-color:lightblue;
    }
    td, th {
    
    
      border-right :1px solid gray;
      border-bottom :1px solid gray;
      width:100px;
      height:30px;
      box-sizing: border-box;
      text-align:center;
    }
    th:first-child {
    
    
      position:sticky;
      left:0; /* 首列最左 */
      z-index:1;
    }

    thead tr th {
    
    
      position:sticky;
      top:0; /* 首行最上 */
    }
	/*左上角第一个单元格，显示优先级要最高*/
    thead th:first-child{
    
    
      z-index:2;
      background-color:lightblue;
    }
  </style>

効果は次のとおりです。
ここに画像の説明を挿入
効果は Google の方が優れています。ただし、IE とは互換性がありません.IE と互換性を持たせたい場合は、古い方法を使用して疑似ヘッダーをネストすることができます。

純粋な css は、固定ヘッダーとテーブルの最初の列を実現します (IE とは互換性がありません)。

おすすめ