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

表のヘッダー／フッターを固定 #2　《プログラマーがネットで副収入を得る方法とは》

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

このサンプルは、スタイルシートを使用して表(table)のヘッダー／フッターを固定してボディの部分をスクロールします。

※表のヘッダー／フッターが表示されないときは、「このサンプルを編集して試してみる」をクリックしてご覧ください。

このサンプルは、table.tableoneにtable.tabletwoを入れ子にして実装しています。なお、table.tabletwoはdiv.inner要素内に挿入します。

<table class="tableone" summary="summary">
  <caption>caption</caption>
  <thead>
    <tr>
   　：：：
    </tr>
  </thead>
  <tfoot>
    <tr>
      ：：：
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="5">
        <div class="inner">
	  <table class="tabletwo">...</table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<!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 #2</title>
  <style type="text/css">
    .tableone
    {
      width: 650px;
      border-collapse: collapse;
      margin: 0 auto;
    }
    .tabletwo
    {
      width: 620px;
      border-collapse: collapse;
    }
    .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;}
    .tableone
    {
      background: #697210;
      border: 1px solid #fff;
      color: #fff;
    }
    .tableone td
    {
      border: 1px solid #fff;
      color: #fff;
    }
    .tableone tbody
    {
      background: #f0c992;
      color: #000;
    }
    .tableone caption
    {
      background: #fff;
      color: #697210;
      font-size: 1.2em;
      margin: 0 auto;
    }
        
    .tableone tfoot td
    {     
      text-align: center;
    }    
    
    .tabletwo td
    {
      background: #eee;
      color: #000;
    }
    .tableone th, .tabletwo th
    {
      text-align: left;
    }
    .tabletwo tr.dk td
    {
      background: #ddd;
      color: #000;
    }
    .inner
    {
      height: 10em;
      overflow: auto;
    }
  </style>
</head>
<body>

<table class="tableone" summary="summary">
  <caption>caption</caption>
  <thead>
    <tr>
      <th class="th1" scope="col">col1</th>
      <th class="th2" scope="col">col2</th>
      <th class="th3" scope="col">col3</th>
      <th class="th4" scope="col">col4</th>
      <th class="th5" scope="col">col5</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="5">footer</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="5">
        <div class="inner">
          <table class="tabletwo">
          
            <tr>
              <th class="td1" scope="row">row 1.1</th>
              <td class="td2">row 1.2</td>
              <td class="td3">row 1.3</td>
              <td class="td4">row 1.4</td>
              <td class="td5">row 1.5
                <select id="Select1">
                  <option>item 1</option>
                  <option>item 2</option>
                  <option>item 3</option>
                </select>
              </td>
            </tr>
            <tr class="dk">
              <th scope="row">row 2.1</th>
              <td>row 2.2</td>
              <td>row 2.3</td>
              <td>row 2.4</td>
              <td>row 2.5</td>
            </tr>

</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

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

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

表のヘッダー／フッターを固定 #2　《プログラマーがネットで副収入を得る方法とは》

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

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

表のヘッダー／フッターを固定 #2 《プログラマーがネットで副収入を得る方法とは》

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

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

表のヘッダー／フッターを固定 #2　《プログラマーがネットで副収入を得る方法とは》