HTML　ヘッダーをスクロール対象にせず、ヘッダーを結合する方法を教えてください。

↓ヘッダーをスクロール対象にしたくない

以下ソース

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4	<link href="Untitled-1.css" rel="stylesheet">
5	<meta charset="UTF-8">
6	<meta http-equiv="X-UA-Compatible" content="IE=edge">
7	<meta name="viewport" content="width=device-width, initial-scale=1.0">
8	<title>Document</title>
9</head>
10<body>
11	<table class="infoTable">
12		<tr class="restaurantName">
13			<th colspan="3">お知らせ</th>
14		</tr>
15		<tr>
16			<td class="infoDate">2021/10/27</td>
17			<td class="infoSource">S</td>
18			<td class="infoContent">あいうえお</td>
19		</tr>
20		<tr>
21			<td class="infoDate">2021/10/27</td>
22			<td class="infoSource">K</td>
23			<td class="infoContent">さしすせそ</td>
24		</tr>
25		<tr>
26			<td class="infoDate">2021/10/27</td>
27			<td class="infoSource">K</td>
28			<td class="infoContent">あいうえお</td>
29		</tr>
30		<tr>
31			<td class="infoDate">2021/10/27</td>
32			<td class="infoSource">K</td>
33			<td class="infoContent">あいうえお</td>
34		</tr>
35		<tr>
36			<td class="infoDate">2021/10/27</td>
37			<td class="infoSource">K</td>
38			<td class="infoContent">あいうえお</td>
39		</tr>
40	</table>
41</body>
42</html>
43
44

CSS
1table.infoTable td, table.infoTable th {
2	border: 2px #598059 solid;
3	text-align: center;
4	width: 130px;
5}
6table.infoTable td {
7	color: #000000;
8	font-size: 25px;
9}
10table.infoTable th {
11	background-color: #598059;
12	color: #ffffff;
13	font-size: 30px;
14}
15
16table.infoTable {
17	border-collapse: collapse;
18	margin: auto;
19}
20
21table.infoTable thead, table.infoTable tbody {
22	display: block;
23}
24
25table.infoTable tbody {
26	overflow-x: hidden;
27	overflow-y: scroll;
28	height: 200px;
29
30}

CSSは上のままで HTMLに<thead>と<tbody>を入れると

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4	<link href="Untitled-1.css" rel="stylesheet">
5	<meta charset="UTF-8">
6	<meta http-equiv="X-UA-Compatible" content="IE=edge">
7	<meta name="viewport" content="width=device-width, initial-scale=1.0">
8	<title>Document</title>
9</head>
10<body>
11	<table class="infoTable">
12		<thead>
13			<tr class="restaurantName">
14				<th colspan="3">お知らせ</th>
15			</tr>
16		</thead>
17		<tbody>
18			<tr>
19				<td class="infoDate">2021/10/27</td>
20				<td class="infoSource">S</td>
21				<td class="infoContent">あいうえお</td>
22			</tr>
23			<tr>
24				<td class="infoDate">2021/10/27</td>
25				<td class="infoSource">K</td>
26				<td class="infoContent">さしすせそ</td>
27			</tr>
28			<tr>
29				<td class="infoDate">2021/10/27</td>
30				<td class="infoSource">K</td>
31				<td class="infoContent">あいうえお</td>
32			</tr>
33			<tr>
34				<td class="infoDate">2021/10/27</td>
35				<td class="infoSource">K</td>
36				<td class="infoContent">あいうえお</td>
37			</tr>
38			<tr>
39				<td class="infoDate">2021/10/27</td>
40				<td class="infoSource">K</td>
41				<td class="infoContent">あいうえお</td>
42			</tr>
43		</tbody>
44	</table>
45</body>
46</html>

となるのですが、ヘッダーが乱れてしまいます。

うまいやり方があれば、ご教示ください。

行動規範の内容に同意します

回答2件

ベストアンサー

table.infoTable th のところに

css
1position: sticky;
2top: 0;

と追加してみてください。

投稿2021/10/27 09:23

cerfweb

総合スコア1907

riesa

2021/10/28 07:02

シンプルにご回答ありがとうございます。

行動規範の内容に同意します

thead に display: block; を設定することで、テーブル要素ではなくなるので、独自に幅を設定する必要があります。

下記のCSSを追加。

css
1table.infoTable thead tr,
2table.infoTable thead tr th {
3  width:100%;
4  display: block;
5  box-sizing: border-box;
6}

投稿2021/10/27 09:15

hatena19

総合スコア34075

riesa

2021/10/28 07:02

ご回答ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

HTML　ヘッダーをスクロール対象にせず、ヘッダーを結合する方法を教えてください。

関連した質問