【css】テーブル内でのスクロールをしたい

Question

前提・実現したいこと

phpで検索機能を作っています。
検索条件を指定して該当データが表示されるのですが、
スクロールするとカラムごとに何のデータなのかわかりずらいので
テーブルのヘッドを固定してデータ部分をスクロールさせたいです。

発生している問題・エラーメッセージ

![

該当のソースコード

try {if($time_code==='0'){
		$sql = "SELECT DISTINCT * FROM table_5
				WHERE trade_date BETWEEN :trade_date_from AND :trade_date_to
				AND del_flag = 0";
				 
		$stmt = $pdo->prepare($sql);
		$stmt->bindValue(':trade_date_from', $trade_date_from,PDO::PARAM_STR);
		$stmt->bindValue(':trade_date_to', $trade_date_to,PDO::PARAM_STR);
		$stmt->execute();
		$count = $stmt->rowCount();
		print "<p id='sea_stmt'>検索結果は<span>{$count}</span>件です</p><BR>";
    }else{
	    $sql = "SELECT DISTINCT * FROM table_5 
			WHERE trade_date BETWEEN :trade_date_from AND :trade_date_to
			AND time_code=:time_code
			AND del_flag = 0";
		$stmt = $pdo->prepare($sql);
		$stmt->bindValue(':trade_date_from', $trade_date_from,PDO::PARAM_STR);
		$stmt->bindValue(':trade_date_to', $trade_date_to,PDO::PARAM_STR);
		$stmt->bindValue(':time_code', $time_code,PDO::PARAM_INT);
		$stmt->execute();
		$count = $stmt->rowCount();
		print "<p id='sea_stmt'>検索結果は<span>{$count}</span>件です</p><BR>";
		}

} catch(PDOException $Exception){
	print "エラー :".$Exception->getMessage();
}


if($count < 1){
		print "検索結果がありません。<BR>";
}else{
?>

<div class='tbwrp'>
	<TABLE class="table-design tablelock1">
		<THEAD class='thead'>
			<TR>
				<TH>年月日</TH>
				<TH>時刻コード</TH>
				<TH >売り入札量(kWh)</TH>
				<TH>買い入札量(kWh)</TH>
				<TH>約定総量(kWh)</TH>
				<TH>システムプライス(円/kWh)</TH>
				<TH>エリアプライス北海道(円/kWh)</TH>
				<TH>エリアプライス東北(円/kWh)</TH>
				<TH>エリアプライス東京(円/kWh)</TH>
				<TH  width=''>エリアプライス中部(円/kWh)</TH>
				<TH  width=''>エリアプライス北陸(円/kWh)</TH>
				<TH  width=''>エリアプライス関西(円/kWh)</TH>
				<TH  width=''>エリアプライス中国(円/kWh)</TH>
				<TH  width=''>エリアプライス四国(円/kWh)</TH>
				<TH  width=''>エリアプライス九州(円/kWh)</TH>
            </TR>
		</THEAD>

		<TBODY class='tbody'>
<?php
	while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
?>
			<TR class='table-design tablelock1'>
				<TD ><?=htmlspecialchars($row['trade_date'])?></TD>
				<TD><?=htmlspecialchars($row['time_code'])?></TD>		
				<TD> <?=htmlspecialchars($row['trade_sale'])?></TD>		
				<TD><?=htmlspecialchars($row['trade_buy'])?></TD>		
				<TD><?=htmlspecialchars($row['trade_total'])?></TD>		
				<TD><?=htmlspecialchars($row['system_price'])?></TD>		
				<TD><?=htmlspecialchars($row['area_price_hokkaido'])?></TD>				
				<TD><?=htmlspecialchars($row['area_price_tohoku'])?></TD>				
				<TD><?=htmlspecialchars($row['area_price_tokyo'])?></TD>				
				<TD><?=htmlspecialchars($row['area_price_tyubu'])?></TD>				
				<TD><?=htmlspecialchars($row['area_price_hokuriku'])?></TD>				
				<TD ><?=htmlspecialchars($row['area_price_kansai'])?></TD>				
				<TD ><?=htmlspecialchars($row['area_price_tyugoku'])?></TD>				
				<TD ><?=htmlspecialchars($row['area_price_sikoku'])?></TD>
				<TD ><?=htmlspecialchars($row['area_price_kyusyu'])?></TD>
			</TR>
<?php	
	}
?>
		</TBODY>
	</TABLE>
</div>
<?php
}
?>
</BODY>
</HTML>

.tbwrp {
    overflow-x: scroll;
    overflow-y: scroll;
}

TH {
    white-space: nowrap;
}

thead, tbody{
    display: block;
}

試したこと

cssで下のやつを記述したがうまく動かない

thead, tbody{
display: block;
}

.tbody {
overflow-x: hidden;
overflow-y: scroll;
}

補足情報（FW/ツールのバージョンなど）

docker 3
mysql 5.6
php 5.6
phpmyadmin

Answer 1

ul と　li を使ったらできました。displayがtable-cellだと色々大変でした。

Comments

[kei344]

【質問をした後に自己解決してしまった --- ヘルプ｜teratail（テラテイル）】
https://teratail.com/help#resolve-myself
> 後から読む人のためにも、具体的な解決手順を記載してください。

Answer 2

thにwhite-space:nowrapを追加し、Tableを各overflowを設定した100%か任意の幅のdivで囲ってみると、どうですか？

Comments

[tatuki81]

うまくいきませんでした。

[yuki84web]

ヘッダは固定でしたね、失礼いたしました。
参考にされたのはこれですか？→https://so-zou.jp/web-app/tech/css/sample/fixed-header.htm
tbodyにheightを指定するとどうなりますでしょうか。
あとは行ごとにスクロールバーが出てしまってるので、他のCSSも影響していそうな気もします。