HTMLで作ったテーブルの１行目を固定したい

Question

HTML・CSSを勉強中の初心者です。
ブラウザで表示される表の１行目（会員コード、会員名等）の部分を固定し、スクロールしても表示したままにしたいです。
tableタグを２つに分ければできそうな気はしますが、どうなのでしょうか。
どなたかご教示お願いします。

	
			<div class="example">
				<div class="result">
				<table border="1">
  					<tr>
　　						<th>会員コード</th>
　　						<th>会員名</th>
　　						<th>メールアドレス</th>
　　						<th>登録日付</th>
　　						<th>都道府県</th>
　　						<th>誕生日</th>
　　						<th>性別</th>
　　						<th>職業</th>
　　						<th>登録歴</th>
　　				   </tr>
  					 <tr align="center">
　　						<td>1AZ0PL</td>
　　						<td>斉藤一郎</td>
　　						<td>[e-mail]</td>
　　						<td>20180911</td>
　　						<td>北海道</td>
　　						<td>19641010</td>
　　						<td>男性</td>
　　						<td>公務員</td>
　　						<td>20年</td>
　					 </tr>
　					 <tr align="center">
　　						<td>2SX9OK</td>
　　						<td>斉藤二郎</td>
　　						<td>[e-mail]</td>
　　						<td>20180911</td>
　　						<td>青森</td>
　　						<td>19641010</td>
						<td>男性</td>
　　						<td>自営業</td>
　　						<td>10年</td>
　　				     </tr>	　　						
　					   <tr align="center">
　　						<td>3DC8IJ</td>
　　						<td>斉藤三郎</td>
　　						<td>[e-mail]</td>
　　						<td>20180911</td>
　　						<td>岩手</td>
　　						<td>19641010</td>
　　						<td>男性</td>
　　						<td>会社員</td>
　　						<td>15年</td>
　　					  </tr>
　					    <tr align="center">
						   <td>4FV7UH</td>
　　						<td>斉藤四郎</td>
　　						<td>[e-mail]</td>
　　						<td>20180911</td>
　　						<td>秋田</td>
　　						<td>19641010</td>
　　						<td>男性</td>
　　						<td>会社員</td>
　　						<td>20年</td>
　					    </tr>
				   </table>
				   </div>
			   </div>

@charset "UTF-8";

.example {
  width: 600px;
  height: 120px;
  overflow: scroll;
  
}
.result {
	float: left;
	width: 125%;
	marin: 0px auto;
}

Comments

[kszk311]

tableの中ところどころ（tdの外）に全角スペースがあるので、それを取り除くのがまず最初にやることかと思います。固定するために余白をつけたかったのでしょうか？

Answer 1

こういうのでしょうか

FixedMidashi
http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html

jQuery.floatThead
https://nelog.jp/jquery-floatthead

Answer 2

次の構文を利用して見てください。但し、ブラウザーの種類によって表示が異なります。

.sticky_table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

Comments

[rice_medicine]

調べてみると、その方法ではIEやEdgeに対応していないと出てきました。
ほかのやり方はないでしょうか。

[paolo.ahn]

質問の内容に、要件として、IEやEdgeに対応することを明記したら如何ですか？
残念ながらChromeとFirefoxをメインとしている私には力になれず...

Answer 3

テーブルを分ければできそうですね。
table内tdの外に全角スペースがあり、それが変な余白となっているので取っています。
「会員コード」、「会員名」…のそれぞれのセルの幅は、クラスつけるなり:nth-child()のセレクタなりで揃えればできるはず…。

table {
  width: 100%;
}
.result {
  width: 800px;
}
.result-body-wrap {
  height: 100px;
  overflow-y: scroll;
}

<div class="result">
  <table class="result-head" border="1">
    <tr>
      <th>会員コード</th>
      <th>会員名</th>
      <th>メールアドレス</th>
      <th>登録日付</th>
      <th>都道府県</th>
      <th>誕生日</th>
      <th>性別</th>
      <th>職業</th>
      <th>登録歴</th>
    </tr>
  </table>
  <div class="result-body-wrap">
    <table class="result-body" border="1">
      <tr align="center">
        <td>1AZ0PL</td>
        <td>斉藤一郎</td>
        <td>[e-mail]</td>
        <td>20180911</td>
        <td>北海道</td>
        <td>19641010</td>
        <td>男性</td>
        <td>公務員</td>
        <td>20年</td>
      </tr>
      <tr align="center">
        <td>2SX9OK</td>
        <td>斉藤二郎</td>
        <td>[e-mail]</td>
        <td>20180911</td>
        <td>青森</td>
        <td>19641010</td>
        <td>男性</td>
        <td>自営業</td>
        <td>10年</td>
      </tr>
      <tr align="center">
        <td>3DC8IJ</td>
        <td>斉藤三郎</td>
        <td>[e-mail]</td>
        <td>20180911</td>
        <td>岩手</td>
        <td>19641010</td>
        <td>男性</td>
        <td>会社員</td>
        <td>15年</td>
      </tr>
      <tr align="center">
        <td>4FV7UH</td>
        <td>斉藤四郎</td>
        <td>[e-mail]</td>
        <td>20180911</td>
        <td>秋田</td>
        <td>19641010</td>
        <td>男性</td>
        <td>会社員</td>
        <td>20年</td>
      </tr>
    </table>
  </div>
</div>

サンプル

Comments

[rice_medicine]

ありがとうございます。
参考になりました！