HTMLを使って横スクロールするUIは、あまりお勧めできませんが、「Excelみたいに入力したい」とよく聞かれるので試しにHTML＋CSSだけで作ってみました。
こんな感じでheaderの列は、固定でV11からV15までが横スクロールする表になっています。
タブオーダーもイメージした通りに動きます。
概要
HTMLには、formの中に2つのテーブルを配置します。
一つ目のテーブルは、左のheaderの列となります。
二つ目のテーブルは、右のデータ入力をするテーブルになります。
テーブルの各セルにtextを配置しますが、tabindex属性を指定することでテーブルをまたがって正しくフォーカスが移動するように調整します。
HTML
前半部分
HTMLの前半部分は、以下のと通りです。
header部分のテーブルが含まれます。
テーブルの配置調整をするためにスタイルシートにtable.cssを指定します。
スタイルシートで位置を調整するためにdivタグにclassを指定して左側のテーブルを識別する名前をつけます。
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>Table Sample</title> <link rel="stylesheet" href="table.css" type="text/css"> </head> <body> <form> <div class="table_left" id="vhead" > <table> <tr> <td>header</td> </tr> <tr> <td> <input type="text" tabindex="1"> </td> </tr> <tr> <td> <input type="text" tabindex="7"> </td> </tr> </table> </div>
後半部分
後半部分は、右側のテーブルとなります。
tabindexには、右と左のテーブルに関係なくフォーカスを移動してほしい順番に番号をつけます。（これもスタイルシートで付ける方法はないものでしょうか…）
<div class="table_right" id="hhead"> <table> <tr> <td>v11</td> <td>v12</td> <td>v13</td> <td>v14</td> <td>v15</td> </tr> <tr> <td> <input type="text" tabindex="2"> </td> <td> <input type="text" tabindex="3"> </td> <td> <input type="text" tabindex="4"> </td> <td> <input type="text" tabindex="5"> </td> <td> <input type="text" tabindex="6"> </td> </tr> <tr> <td> <input type="text"> </td> <td> <input type="text"> </td> <td> <input type="text"> </td> <td> <input type="text"> </td> <td> <input type="text"> </td> </tr> </table> </div> </form> </body> </html>
スタイルシート
スタイルシートの内容です。
overflow-xで横スクロールを指定します。
スタイルシートは、もっと積極的に活用すべきだと思います。
.table_left {
position:absolute;
top:50px;
left:0px;
width:150px;
height:85px;
overflow:hidden;
}
.table_right {
position:absolute;
top:50px;
left:150px;
width:300px;
height:85;
overflow-x:scroll;
}