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 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=" エクスポート "> 136 </td> 137 </tr> 138 </table> 139 </form> 140 </body> 141</html>
どうすれば良いのかわかりません。スクロールバーをtableの外側に表示するにはどうすれば良いでしょうか。
回答2件
あなたの回答
tips
プレビュー