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

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

新規登録して質問してみよう
ただいま回答率
85.48%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

6299閲覧

cssでヘッダ固定のスクロール

chintao1224

総合スコア155

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/01/03 00:46

編集2017/01/03 08:16

cssを使ってtableのヘッダ固定スクロールをやりたいです。
いろいろ試したのですが、どうしてもtheadの幅とtbody+スクロールバーの幅が同じになります。
一つ一つのカラム幅を指定しているのですが、スクロールバーが入り込むような感じになります。

CSS

1/* 基本のスタイル */ 2html {height: 100%;} /*高さ100%に指定*/ 3 4body {height: 90%;} /*高さ90%に指定*/ 5 6h1 { 7 font-size: 32px; 8 margin: 0px; 9 padding: 4px; 10 color: #000000; 11} 12 13hr { 14 margin-top: 8px; 15 margin-bottom: 8px; 16} 17 18/* ページ固有のスタイル */ 19/* ログインページ */ 20 21.page_login { 22 position: absolute; 23 top: 0px; 24 right: 0px; 25 bottom: 0px; 26 left: 0px; 27 margin: auto; 28 29 width: 600px; 30 height: 150px; 31} 32 33#login_area { 34 background-color: #a9a9a9; 35} 36 37th.login_caption { 38 width: 150px; 39 text-align: left; 40 padding: 10px; 41 color: #ffffff; 42 background-color: #696969; 43} 44 45td.login_field { 46 padding: 8px; 47} 48 49td.login_buttons { 50 text-align: center; 51 padding: 8px; 52} 53 54/* リストページ */ 55 /*table*/ 56table.statuslist { 57 width: 1100px;/*スクロールバーの幅コミコミ*/ 58 border-collapse:collapse; 59} 60 /*tbody*/ 61table.statuslist>tbody{ 62 height: 150px; 63 float:left;/*この設定によりoverflowが有効となる*/ 64 overflow-y: scroll; 65} 66 /*tr*/ 67table.statuslist tr{ 68 float:left;/*この設定によりセル幅が固定化される*/ 69} 70 71 /*border*/ 72table.statuslist>thead>tr>th{ 73 text-align: center; 74 padding: 8px; 75 color: #ffffff; 76 background-color: #696969; 77 border:solid 1px black; 78} 79 80table.statuslist>tbody>tr>th{ 81 padding: 6px; 82 background-color: #696969; 83 border-left: solid 1px black; 84 border-bottom: solid 1px black; 85 border-right: solid 1px black; 86} 87 88table.statuslist>tbody>tr>td{ 89 padding: 6px; 90 border-left: solid 1px black; 91 border-bottom: solid 1px black; 92 border-right: solid 1px black; 93} 94 95.sCol1 { 96 width: 25px; 97} 98 99.sCol2 { 100 width: 200px; 101} 102 103.sCol3 { 104 width: 50px; 105} 106 107.sCol4 { 108 width: 200px; 109} 110 111.sCol5 { 112 width: 150px; 113} 114 115.sCol6 { 116 width: 100px; 117} 118 119.sCol7 { 120 width: 250px; 121} 122 123.sCol8 { 124 width: 50px; 125} 126 127.sCol78 { 128 width: 300px; 129}

html

1<html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 4 <title>一覧</title> 5 <link rel="stylesheet" href="style.css" type="text/css"> 6 </head> 7 <body onload="rowCheck();"> 8 <h1>一覧</h1> 9 <hr> 10 <table border="0" width="100%"> 11 <tr> 12 <td align="left"> 13 <select name="list"> 14 <option value="status_list">テスト </option> 15 </select> 16 </td> 17 <td align="right"> 18 ようこそ ○○○ さん 19 &nbsp;&nbsp; 20 <input type="button" value="ログアウト"> 21 </td> 22 </tr> 23 </table> 24 <br> 25 <form action="list" method="get"> 26 <table border="0" width="80%"> 27 <tr> 28 <td width="100px"> 29 テスト1 30 </td> 31 <td width="300px"> 32 <input type="text" name="dealtitle" value="" size="45"> 33 </td> 34 <td width="100px"> 35 テスト2 36 </td> 37 <td width="300px"> 38 <select name="status"> 39 <option value="0">状態1 </option> 40 <option value="0">状態2 </option> 41 <option value="0">状態3 </option> 42 <option value="0">状態4 </option> 43 </select> 44 </td> 45 <td align="center" width="100px" rowspan="3"> 46 <input type="submit" value=" 検 索 "> 47 </td> 48 </tr> 49 <tr> 50 <td width="100px"> 51 テスト3 52 </td> 53 <td width="300px"> 54 <input type="text" name="memname" value="" size="45"> 55 </td> 56 <td width="100px"> 57 テスト4 58 </td> 59 <td width="300px"> 60 <input type="text" name="memtel" value="" size="46"> 61 </td> 62 </tr> 63 <tr> 64 <td width="100px"> 65 テスト5 66 </td> 67 <td width="300px"> 68 <input type="text" name="dealtitle" value="" size="45"> 69 </td> 70 </tr> 71 </table> 72 <br> 73 <table class="statuslist" cellspacing="1" cellpadding="0"> 74 <thead> 75 <tr> 76 <th class="sCol1"> 77 <input type="checkbox" name="chkall" id="chkall"> 78 </th> 79 <th class="sCol2"> 80 カラム1 81 </th> 82 <th class="sCol3"> 83 カラム2 84 </th> 85 <th class="sCol4"> 86 カラム3 87 </th> 88 <th class="sCol5"> 89 カラム4 90 </th> 91 <th class="sCol6"> 92 カラム5 93 </th> 94 <th class="sCol78" colspan="2"> 95 カラム6 96 </th> 97 </tr> 98 </thead> 99 <tbody> 100 <tr> 101 <th class="sCol1"> 102 <input type="checkbox" class="chk"> 103 </th> 104 <td class="sCol2"> 105 △△△ 106 </td> 107 <td class="sCol3"> 108 ××× 109 </td> 110 <td class="sCol4"> 111 △△△ 112 </td> 113 <td class="sCol5"> 114 090-9999-9999 115 </td> 116 <td class="sCol6"> 117 yyyy/mm/dd 118 </td> 119 <td class="sCol7"> 120 △△△ 121 </td> 122 <td class="sCol8" align="center"> 123 <input type="submit" value="更新"> 124 </td> 125 </tr> 126 </tbody> 127 </table> 128 <br><br> 129 <table border="0" width="80%"> 130 <tr> 131 <td align="left"> 132 <input type="button" value=" インポート "> 133 </td> 134 <td align="right"> 135 <input type="button" id="export" value=" エクスポート ">&nbsp;&nbsp;&nbsp;&nbsp; 136 </td> 137 </tr> 138 </table> 139 </form> 140 </body> 141</html>

どうすれば良いのかわかりません。スクロールバーをtableの外側に表示するにはどうすれば良いでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/01/03 04:52

状況が再現できるHTMLも追記ください。質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
chintao1224

2017/01/03 05:44

慌てて修正したので、コードブロックで分けていませんでした。申し訳ございません。
kei344

2017/01/03 06:06

編集は何度も出来ますが・・・。
chintao1224

2017/01/03 06:36

コードブロックを追記しました
kei344

2017/01/03 06:41

コードの最初に```(バッククオート3つ)+改行、コードの終わりに改行+```(バッククオート3つ)です。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
guest

回答2

0

自己解決

サイトを調べて頑張ってみます。お騒がせしました。ありがとうございました。

投稿2017/01/07 16:15

chintao1224

総合スコア155

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

スクロールバー自体がブラウザによって出力されるものなため、簡単には行かないような気がします。下記の記事は御覧になられましたか?

【HTML/CSSヘッダー固定のスクロールテーブル - kagan’s blog】
http://kagan.hatenablog.com/entry/2014/08/08/071726

【CSSでヘッダを固定したスクロールテーブルを作る方法: 小粋空間】
http://www.koikikukan.com/archives/2015/03/10-005555.php

【Tableのヘッダ固定を行うCSS & JQuery | Web’Notes】
http://webnonotes.com/css/table-header/

【CSSのみで幅可変のヘッダ固定テーブルを実装 - Qiita】
http://qiita.com/edit-mode/items/eda2f228f53e57827b7c

投稿2017/01/03 08:35

kei344

総合スコア69407

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chintao1224

2017/01/03 09:24

教えていただいたサイトを見てUPしたコードを作成しました。 スクロールバーをtableの中に入り込まないようにするにはどうしたらよいのでしょうか。
kei344

2017/01/03 09:28

どれを参考にされたのでしょうか。似たコードが見当たらないように思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問