スクロールできるテーブルの一番上の行を固定したい

見出し	見出し	見出し
テキスト	テキスト	テキスト
テキスト	テキスト	テキスト
テキスト	テキスト	テキスト
テキスト	テキスト	テキスト
テキスト	テキスト	テキスト
テキスト	テキスト	テキスト

実現したいこと

スクロールできるテーブルの一番上の行を固定したいです。

前提

HTMLで、自分の好きな数だけ行を追加できる名言集テーブルを作っています。
CSSにて「position: sticky; top: 0;」を使うことは分かるのですが、
今回作ったテーブルにおいてはどのように実装すれば良いのか分かりませんでした。
HTMLの37行目あたりです。

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

特になし

該当のソースコード

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script><script src="classic.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/edit.css">
10    <script>
11    </script>
12</head>
13<body>
14    <div class="relation">
15     <img src="star_sky.jpg" alt="星空の画像">
16     <a href="index.html">
17         <div class="icon" button type="button"> 
18             <img src="return.svg" class="ButtonImgSize">
19         </div>
20     </a>
21         <div class="icon2" button type="button" onclick="coladd()"> 
22             <img src="plus.svg" class="ButtonImgSize2">
23         </div>
24    </div>
25
26    <p>セルをタップして編集できます</p>
27
28    <div class="table_scroll">     
29      <table id="table" border="1">
30      </table>
31    </div>
32
33    <script>
34        var table = document.getElementById("table");
35        var word = "";
36
37        var row = table.insertRow(-1);
38        var cell1 = row.insertCell(-1);
39        var cell2 = row.insertCell(-1);
40        cell1.innerHTML = '<div contentEditable="false">名言集</div>';
41        cell2.innerHTML = '<div contentEditable="false"></div>';
42        
43        if(localStorage.getItem('words')){
44        words = JSON.parse(localStorage.getItem('words'));
45        buildTable();
46        }else{
47        coladd("幸せになるため以外に、頑張んなくたっていいんだよ");
48        }
49
50        function updateArray() {
51            var words = [];
52            var table = document.getElementById("table");
53            for(var i=1; i < table.rows.length; i++){
54                var word = table.rows[i].cells[0].textContent;
55                words.push(word);
56            }
57            localStorage.setItem('words',JSON.stringify(words));
58        }
59
60        function buildTable(){
61        var table = document.getElementById("table");
62        while (table.rows.length > 0) table.deleteRow(0);
63        // ★ローカルストレージからデータを取得
64        var localSt = localStorage.getItem('words');
65        // ★JSON形式から連想配列に変換
66        var data = JSON.parse(localSt);
67        for(var i=0; i < data.length; i++){
68        var row = table.insertRow(-1);
69        var cell1 = row.insertCell(-1);
70        var cell2 = row.insertCell(-1);
71        cell1.innerHTML = '<div contentEditable="true" oninput="updateArray()">' + data[i] + '</div>';
72        cell2.innerHTML = '<input type="button" value="削除" id="coladd" onclick="coldel(this)">';
73          }
74        }
75
76        function coladd(word) {
77        var table = document.getElementById("table");
78        // 行を行末に追加
79        var row = table.insertRow(-1);
80        //td分追加
81        var cell1 = row.insertCell(-1);
82        var cell2 = row.insertCell(-1);
83        // セルの内容入力
84        cell1.innerHTML = '<div contentEditable="true" oninput="updateArray()">'+(word ? word : "")+'</div>';
85        cell2.innerHTML = '<input type="button" value="削除" id="coladd" onclick="coldel(this)">';
86
87        updateArray();
88    }
89    function coldel(obj) {
90        // 削除ボタンを押下された行を取得
91        tr = obj.parentNode.parentNode;
92        // trのインデックスを取得して行を削除する
93        tr.parentNode.deleteRow(tr.sectionRowIndex);
94
95        updateArray();
96    }
97    </script>
98</body>
99</html>

CSS
1* {
2    margin: 0;
3    padding: 0;
4}
5
6img {
7  width: 100%;
8  height: 100vh;
9  background-image: url(star_sky.jpg);
10  background-size: cover;
11  background-position: center;
12}
13
14.ButtonImgSize {
15    width: 30px;
16    height: 30px;
17}
18
19.ButtonImgSize2 {
20    width: 20px;
21    height: 20px;
22}
23
24.relation {
25    position: relative;
26}
27
28.icon {
29    width: 40px;
30    height: 40px;
31    background-color:whitesmoke;
32    display: flex;
33    justify-content: center;
34    align-items: center;
35    font-size: 1.5rem;
36    border-radius: 10%;
37    cursor: pointer;
38    
39    position: absolute;
40    top: -15px;
41    left: -323px;
42}
43
44.icon2 {
45    width: 20px;
46    height: 20px;
47    background-color:whitesmoke;
48    display: flex;
49    justify-content: center;
50    align-items: center;
51    font-size: 1.5rem;
52    border-radius: 10%;
53    cursor: pointer;
54    
55    position: absolute;
56    top: 15%;
57    left: 20px;
58}
59
60.table_scroll{
61  position: absolute;
62  z-index: 1;
63  overflow: scroll; /* スクロールする */
64  width: 320px;
65  height: 350px;
66  border: 3px solid tomato;
67  top: 22%;
68  left: 25px;
69}
70
71table {
72  position: absolute;/*絶対配置*/
73  color: white;/*文字は白に*/
74  border-color: white;
75  font-size: 0.8em;/*サイズ2倍*/
76  font-family :serif, sans-serif;
77  text-align: center;
78  width: 320px;
79  top: 30%;
80  left: 50%;
81  transform: translate(-50%, -50%);
82  overflow-y: scroll;
83  }
84
85  a {/*aタグを画像の真ん中に*/
86  position: absolute;
87  top: 5%;
88  left: 90%;
89  -ms-transform: translate(-50%,-50%);
90  -webkit-transform: translate(-50%,-50%);
91  transform: translate(-50%,-50%);
92  /*以下装飾*/
93  margin:0;/*余計な隙間を除く*/
94  font-size: 20px;/*文字サイズ*/
95  color: white;/*文字色*/
96  text-decoration: none;/*下線を表示させない*/
97  }
98
99  p{ 
100  position: absolute;
101  color: white;/*文字は白に*/
102  font-size: 1em;/*サイズ2倍*/
103  font-family :serif, sans-serif;
104  text-align: center;
105  top: 17%;
106  left: 190px;
107  transform: translate(-50%, -50%);
108  white-space: nowrap;
109  }

試したこと

・「.insertCell」でセルを作るのではなく、<td></td>で作ってからtd{position: sticky; top: 0;}をCSSに記入してみる

・固定したい行を<td>から<th>に直してからth{position: sticky; top: 0;}をCSSに記入してみる

何卒よろしくお願いいたします。

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

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

回答2件

ベストアンサー

theadがないテーブルの1行目を固定する意味はあるのでしょうか？
普通のテーブルならこんな感じで

CSS
1<style>
2.wrap{
3width:fit-content;
4height:100px;
5  overflow-y:scroll;
6}
7table{
8border-collapse:separate;
9border-spacing:0;
10}
11tr *:not(:first-child){
12 border-left:0px solid;
13}
14tbody tr > *{
15 border-top:0px solid;
16}
17
18thead{
19position: sticky;
20top: 0px;
21}
22th{
23  background-Color:gray;
24  border: 1px solid black;
25}
26td{
27border: 1px solid black;
28}
29</style>
30test<br>
31test<br>
32test<br>
33<div class="wrap">
34<table>
35<thead>
36<tr>
37    <th>見出し</th>
38    <th>見出し</th>
39    <th>見出し</th>
40  </tr>
41</thead>
42<tbody>
43  <tr>
44    <td>テキスト</td>
45    <td>テキスト</td>
46    <td>テキスト</td>
47  </tr>
48  <tr>
49    <td>テキスト</td>
50    <td>テキスト</td>
51    <td>テキスト</td>
52  </tr>
53  <tr>
54    <td>テキスト</td>
55    <td>テキスト</td>
56    <td>テキスト</td>
57  </tr>
58  <tr>
59    <td>テキスト</td>
60    <td>テキスト</td>
61    <td>テキスト</td>
62  </tr>
63  <tr>
64    <td>テキスト</td>
65    <td>テキスト</td>
66    <td>テキスト</td>
67  </tr>
68  <tr>
69    <td>テキスト</td>
70    <td>テキスト</td>
71    <td>テキスト</td>
72  </tr>
73</tbody>
74</table>
75</div>
76test<br>
77test<br>
78test<br>
79
80
81# 調整
82table_scrollとtableを以下に変更し、tr関連のcssを追加してみてください
83```CSS
84.table_scroll{
85  position: absolute;
86  z-index: 1;
87  overflow-y: scroll;
88  width: fit-content;
89  height: 350px;
90  border: 3px solid tomato;
91  top: 100px;
92  left: 25px;
93}
94table {
95  color: white;
96  border-collapse:separate;
97  border-spacing:0;
98  font-size: 0.8em;
99  font-family :serif, sans-serif;
100  text-align: center;
101  width: 320px;
102  left: 50%;
103  overflow-y: scroll;
104}
105tr:first-child{
106position: sticky;
107top: 0px;
108}
109tr:not(:first-child){
110 border-left:0px solid;
111}

投稿2023/05/10 01:12

編集2023/05/10 05:46

yambejp

総合スコア118164

zero_koko

2023/05/10 05:16 編集

回答いただき、ありがとうございます！行数が可変なテーブルに行を追加した際、テーブルが上下に伸びてしまうことを防ぐために1行目を固定しようと思っています！一番下に行を追加した際、テーブルは下に伸びてほしいのですがなかなか上手くいかないです💦

yambejp

2023/05/10 05:42 編集

とりあえずposition:absoluteの連発はやめて相対位置をつかったデザインを模索するところからでは？ざっとみたところtableの「 transform: translate(-50%, -50%);」はやめたほうが良いと思います

zero_koko

2023/05/10 07:09 編集

具体的なアドバイスを頂けて非常にありがたいです。「要素の半分だけ戻すことができるので中央に配置されるようになる」からこそ、テーブルが変になっていたのですね！何とかできそうです！助かりました！

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

まず、48行目の<table id="table" border="1">の下にtheadタグを作成し、53行目から57行目まで: var row = table.insertRow(-1); から cell2.innerHTML = '<div contentEditable="false"></div>' までの5行を削除して、ヘッダー行のコードが重複しないようにして下さい。

CSSファイルを新規作成して、12行目の直後で、

css
1thead th {
2  position: sticky;
3  top: 0;
4  background-color: #000; /* 背景色を設定してテキストが重ならないようにする */
5}

こんな感じのcssを記述して下さい。

投稿2023/05/09 16:50

NICKO

総合スコア62

yambejp

2023/05/10 05:37 編集

投稿場所間違え

zero_koko

2023/05/10 05:26

ありがとうございます！アドバイスをいただいた通りにやってみたのですが、固定されませんでした💦 テーブルの一番下に行を追加した際、どうしてもテーブルが上下に伸びてしまいます。

zero_koko

2023/05/10 05:29

yambejpさんへそうなのですね😥 コードを見様見真似で書いていたことがアダとなりました💦 相対位置をつかったデザインを勉強してきます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.29%

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

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

質問する

実現したいこと

前提

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

該当のソースコード

試したこと

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

関連した質問