ksaitoの日記

日々試したことの覚え書き

HTMLとCSSでテーブルのヘッダを固定したテーブルを作る

HTML

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;
}