JavaScript + Ajax 実践サンプル集 - 表のヘッダー／フッターを固定 #1

表のヘッダー／フッターを固定 #1

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、スタイルシートを使用して表(table)のヘッダー／フッターを固定してスクロールさせます。表のスクロールバーを上下に移動してスクロールしてみてください。データにドロップダウンリストがあっても正常に動作します。

div.outerとdiv.inner要素を入れ子にしてtable要素をdiv.innderに入れ子にして実装しています。

<div class="outer">
  <div class="inner">
    <table summary="summary">
    :::
    </table>
  </div>
</div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Vertical Scrolling Table Method #1 </title>
  <style type="text/css">
    .outer
    {
      position: relative;
      padding: 4em 0 3em 0;
      width: 54em;
      background: #eee;
      margin: 0 auto 3em auto;
    }
    .inner
    {
      overflow: auto;
      width: 54em;
      height: 9.6em;
      background: #eee;
    }
    .outer table caption
    {
      position: absolute;
      width: 51.7em;
      text-align: center;
      top: 0;
      left: 0;
      height: 1.5em;
      background: #697210;
      border: 0.1em solid #fff;
      color: #fff;
    }
    .outer thead tr
    {
      position: absolute;
      top: 1.5em;
      height: 1.5em;
      left: 0;
    }
    .outer tfoot td
    {
      position: absolute;
      width: 51.5em;
      text-align: center;
      background: #f0c992;
      border: 0.1em solid #000;
      color: #000;
      bottom: 0;
      left: 0;
    }
    .outer th, .outer td
    {
      width: 10em;
      text-align: left;
    }
    .outer th
    {
      background: #724a10;
      color: #fff;
    }
    .outer .dk
    {
      background: #fff;
    }

.th1
    {
      width: 149px;
    }
    .th2
    {
      width: 99px;
    }
    .th3
    {
      width: 99px;
    }
    .th4
    {
      width: 99px;
    }
    .th5
    {
      width: 200px;
    }
    .td1
    {
      width: 149px;
    }
    .td2
    {
      width: 99px;
    }
    .td3
    {
      width: 99px;
    }
    .td4
    {
      width: 99px;
    }
    .td5
    {
      width: 170px;
    }
 
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner">
      <table summary="summary">
        <caption>caption</caption>
        <thead>
          <tr>
            <th scope="col">col1</th>
            <th scope="col">col2</th>
            <th scope="col">col3</th>
            <th scope="col">col4</th>
            <th scope="col" class="nd">col5</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="5">
              footer
            </td>
          </tr>
        </tfoot>
        <tbody>
        
          <tr>
            <th scope="row">row 1</th>
            <td>row 1.1
              <select id="Select1">
                <option>item1</option>
                <option>item2</option>
                <option>item3</option>
              </select>
            </td>
            <td>row 1.2</td>
            <td>row 1.3</td>
            <td>row 1.4</td>
          </tr>
          <tr class="dk">
            <th scope="row">row 2</th>
            <td>row 2.1</td>
            <td>row 2.2</td>
            <td>row 2.3</td>
            <td>row 2.4</td>
          </tr>
 
          <tr>
            <th scope="row">row 3</th>
            <td>row 3.1</td>
            <td>row 3.2</td>
            <td>row 3.3</td>
            <td>row 3.4</td>
          </tr>
          <tr class="dk">
            <th scope="row">row 4</th>
            <td>row 4.1</td>
            <td>row 4.2</td>
            <td>row 4.3</td>
            <td>row 4.4</td>
          </tr> 
 
          <tr>
            <th scope="row">row 5</th>
            <td>row 5.1</td>
            <td>row 5.2</td>
            <td>row 5.3</td>
            <td>row 5.4</td>
          </tr>
          <tr class="dk">
            <th scope="row">row 6</th>
            <td>row 6.1</td>
            <td>row 6.2</td>
            <td>row 6.3</td>
            <td>row 6.4</td>
          </tr>
          
          <tr>
            <th scope="row">row 7</th>
            <td>row 7.1</td>
            <td>row 7.2</td>
            <td>row 7.3</td>
            <td>row 7.4</td>
          </tr>
          <tr class="dk">
            <th scope="row">row 8</th>
            <td>row 8.1</td>
            <td>row 8.2</td>
            <td>row 8.3</td>
            <td>row 8.4</td>
          </tr>
          
          <tr>
            <th scope="row">row 9</th>
            <td>row 9.1</td>
            <td>row 9.2</td>
            <td>row 9.3</td>
            <td>row 9.4</td>
          </tr>
          <tr class="dk">
            <th scope="row">row 10</th>
            <td>row 10.1
              <select id="Select2">
                <option>item1</option>
                <option>item2</option>
                <option>item3</option>
              </select>            
            </td>
            <td>row 10.2</td>
            <td>row 10.3</td>
            <td>row 10.4</td>
          </tr>   
 
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

CSS部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
.outer
{
  position: relative;
  padding: 4em 0 3em 0;
  width: 54em;
  background: #eee;
  margin: 0 auto 3em auto;
}
.inner
{
  overflow: auto;
  width: 54em;
  height: 9.6em;
  background: #eee;
}
.outer table caption
{
  position: absolute;
  width: 51.7em;
  text-align: center;
  top: 0;
  left: 0;
  height: 1.5em;
  background: #697210;
  border: 0.1em solid #fff;
  color: #fff;
}
.outer thead tr
{
  position: absolute;
  top: 1.5em;
  height: 1.5em;
  left: 0;
}
.outer tfoot td
{
  position: absolute;
  width: 51.5em;
  text-align: center;
  background: #f0c992;
  border: 0.1em solid #000;
  color: #000;
  bottom: 0;
  left: 0;
}
.outer th, .outer td
{
  width: 10em;
  text-align: left;
}
.outer th
{
  background: #724a10;
  color: #fff;
}
.outer .dk
{
  background: #fff;
}

.th1
{
  width: 149px;
}
.th2
{
  width: 99px;
}
.th3
{
  width: 99px;
}
.th4
{
  width: 99px;
}
.th5
{
  width: 200px;
}
.td1
{
  width: 149px;
}
.td2
{
  width: 99px;
}
.td3
{
  width: 99px;
}
.td4
{
  width: 99px;
}
.td5
{
  width: 170px;
}

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

表のヘッダー／フッターを固定 #1

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

表のヘッダー／フッターを固定 #1

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!