Bootstrapを使ったヘッダー固定テーブル（縦スクロール）

###前提・実現したいこと

Bootstpra3を使用
テーブルのヘッダー行を固定し、データ部分を縦スクロールさせたい

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

ヘッダーとデータ項目の行頭が揃わない

###該当のソースコード

html
1  <table class="table table-fixed">
2    <thead>
3      <tr>
4        <th class="col-xs-2">aaa</th>
5        <th class="col-xs-4">bbb</th>
6        <th class="col-xs-4">ccc</th>
7        <th class="col-xs-1">ddd</th>
8        <th class="col-xs-1">eee</th>
9      </tr>
10    </thead>
11    <tbody>
12      <tr>
13        <td class="col-xs-2">aaa</td>
14        <td class="col-xs-4">bbb</td>
15        <td class="col-xs-4">ccc</td>
16        <td class="col-xs-1">ddd</td>
17        <td class="col-xs-1">eee</td>
18      </tr>      
19       <tr>
20        <td class="col-xs-2">aaa</td>
21        <td class="col-xs-4">bbb</td>
22        <td class="col-xs-4">ccc</td>
23        <td class="col-xs-1">ddd</td>
24        <td class="col-xs-1">eee</td>
25      </tr>      
26       <tr>
27        <td class="col-xs-2">aaa</td>
28        <td class="col-xs-4">bbb</td>
29        <td class="col-xs-4">ccc</td>
30        <td class="col-xs-1">ddd</td>
31        <td class="col-xs-1">eee</td>
32      </tr>
33    </tbody>
34  </table>

css
1.table-fixed thead {
2  width: 97%;
3}
4.table-fixed tbody {
5  height: 230px;
6  overflow-y: auto;
7  width: 100%;
8}
9.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
10  display: block;
11  box-sizing: border-box;
12}
13.table-fixed tbody td, .table-fixed thead > tr> th {
14  float: left;
15  border-bottom-width: 0;
16  box-sizing: border-box;
17}

###試したこと
tdに付加されているpadding,marginが原因かと思いいろいろ試し、原因は「見出し項目」と「データ項目」の横幅が異なっていることにあるところまで分かりました。

あと、

css
1.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
2  display: block;
3  box-sizing: border-box;
4}

のdisplay: block;を解除すると、スクロール機能が効かなくなるが、行頭は揃うことも分かりました。

なぜこのような挙動になるのか？また、その修正方法が分かりません。

###補足情報(言語/FW/ツール等のバージョンなど)
下記のソースを参考にしております。
"Fixed Header Scrolling Table"

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

回答1件

ベストアンサー

overflow-yプロパティで表示させているスクロールバーによるずれが原因だと思います。javascriptでスクロールバーの幅を導出し、それを利用してずれをなくすというのはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
7    <style type="text/css">
8        .table-fixed thead {
9            width: 100%;
10        }
11
12        .table-fixed tbody {
13            height: 230px;
14            overflow-y: scroll;
15            width: 100%;
16        }
17
18        .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
19            display: block;
20            box-sizing: border-box;
21        }
22
23        .table-fixed tbody td, .table-fixed thead > tr > th {
24            float: left;
25            border-bottom-width: 0;
26            box-sizing: border-box;
27        }
28    </style>
29</head>
30<body>
31<table class="table table-fixed">
32    <thead>
33    <tr>
34        <th class="col-xs-2">aaa</th>
35        <th class="col-xs-4">bbb</th>
36        <th class="col-xs-4">ccc</th>
37        <th class="col-xs-1">ddd</th>
38        <th class="col-xs-1">eee</th>
39    </tr>
40    </thead>
41    <tbody>
42    <tr>
43        <td class="col-xs-2">aaa</td>
44        <td class="col-xs-4">bbb</td>
45        <td class="col-xs-4">ccc</td>
46        <td class="col-xs-1">ddd</td>
47        <td class="col-xs-1">eee</td>
48    </tr>
49    <tr>
50        <td class="col-xs-2">aaa</td>
51        <td class="col-xs-4">bbb</td>
52        <td class="col-xs-4">ccc</td>
53        <td class="col-xs-1">ddd</td>
54        <td class="col-xs-1">eee</td>
55    </tr>
56    <tr>
57        <td class="col-xs-2">aaa</td>
58        <td class="col-xs-4">bbb</td>
59        <td class="col-xs-4">ccc</td>
60        <td class="col-xs-1">ddd</td>
61        <td class="col-xs-1">eee</td>
62    </tr>
63    <tr>
64        <td class="col-xs-2">aaa</td>
65        <td class="col-xs-4">bbb</td>
66        <td class="col-xs-4">ccc</td>
67        <td class="col-xs-1">ddd</td>
68        <td class="col-xs-1">eee</td>
69    </tr>
70    <tr>
71        <td class="col-xs-2">aaa</td>
72        <td class="col-xs-4">bbb</td>
73        <td class="col-xs-4">ccc</td>
74        <td class="col-xs-1">ddd</td>
75        <td class="col-xs-1">eee</td>
76    </tr>
77    <tr>
78        <td class="col-xs-2">aaa</td>
79        <td class="col-xs-4">bbb</td>
80        <td class="col-xs-4">ccc</td>
81        <td class="col-xs-1">ddd</td>
82        <td class="col-xs-1">eee</td>
83    </tr>
84    <tr>
85        <td class="col-xs-2">aaa</td>
86        <td class="col-xs-4">bbb</td>
87        <td class="col-xs-4">ccc</td>
88        <td class="col-xs-1">ddd</td>
89        <td class="col-xs-1">eee</td>
90    </tr>
91    </tbody>
92</table>
93<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
94<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
95<script>
96    $(function () {
97        var outer = $("<div>").css({
98                visibility: "hidden",
99                width: 100,
100                overflow: "scroll",
101            }).appendTo("body"),
102            width = $("<div>").css({
103                width: "100%"
104            }).appendTo(outer).outerWidth(),
105            result = 0;
106
107        outer.remove();
108        result = 100 - width;
109        $(".table-fixed thead").css({
110            paddingRight: result
111        });
112    });
113</script>
114</body>
115</html>

投稿2017/05/04 09:42

s8_chu

総合スコア14731

tuckQ

2017/05/04 11:06

頂いた調整用のJava Scriptを作業中のファイルに埋め込んでみたのですが、改善が見られませんでした。ただ、頂いたソース丸ごと表示するとズレなく表示ました。カスタムCSSの汚染が原因？と気づき、余計なカスタムCSSを取り除いたところ直りました。まだピンポイントで原因特定はできてませんが、あとは自力で解決できると思います。アドバイスいただきありがとうございました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.37%

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

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

質問する

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

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

Bootstrapを使ったヘッダー固定テーブル（縦スクロール）

関連した質問