HOME > 開発者向けBLOG > Webデザイン >  タイトルをロックして、データ部分を縦スクロール

Technology Note 開発者向けBLOG

Webデザイン

タイトルをロックして、データ部分を縦スクロール

こんにちは、ゼノフィ渡部です。

一般にデータ系のレイアウトは主にテーブルで作成されることが多いと思います。

通常のテーブル表示ではなく、タイトルをロックし、データ部分が設定した高さに達した場合に縦にスクロールする表示をご紹介いたします。

大きくわけて3つの要素で構成します。

  1. 外枠部分
  2. タイトル部分
  3. データ部分

外枠部分はdivで大枠のボーダー線や幅を指定します。

1
2
3
4
5
6
7

/* 外枠部分 */
div.y_data_area {
  width: 600px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  border-left: 1px solid #CCC;
}

タイトル部分はテーブルで作成し、下の各データと縦の線とのズレがないように調整します。

データ部分はdivとテーブルで作成します。

まず、div(「<div class="y_scroll_box">」)を作成し、「max-height」で最大の高さを決め、「overflow-x: hidden;」で余計な横スクロールを非表示にし、「overflow-y: scroll;」で縦のスクロールバーが表示されるようにします。

1
2
3
4
5
6
7
8

div.y_scroll_box {
  width: 600px;
  max-height: 100px;
  height: auto !important; /* IE6 max-height対応 */
  height: 100px;　/* IE6 max-height対応 */
  overflow-x: hidden; /* 横スクロール非表示 */
  overflow-y: scroll; /* 縦スクロール */
}

次に「<div class="y_scroll_box">」の下にもうひとつdivを作成(「<div class="y_hidden">」)し、「overflow: hidden; 」でIE系でデータ部分のテーブルをドラッグした際のズレを防止し、「padding: 0 0 10px;」でスクロール仕切った際の下ボーダーの重なりを防止します。このパディングの値は任意の値でかまいません。

1
2
3
4

div.y_hidden {
  overflow: hidden; /* IE系でデータ部分のテーブルをドラッグした際のズレを防止 */
  padding: 0 0 10px; /* スクロール仕切った際の下ボーダーの重なりを防止 */
}

「<div class="y_hidden>」の下にデータ用のテーブルを作成(「<table class="y_data">」)します。

「<table class="y_data">」では「table.y_data td」の「overflow: hidden;」でデータが幅を超えたとき非表示にし、「 white-space: nowrap;」で データの折り返しを防止します。

1
2
3
4

table.y_data td {
  overflow: hidden; /* データが幅を超えたとき非表示に */
  white-space: nowrap; /* データの折り返しを防止 */
}

こうすることによってタイトル部分のテーブルとのズレを防止します。

ただこうすると、内容がテーブルのtdを超えた場合に非表示になってしまいますので、tdの中に<p>タグを作成し「<p title="データ">」などとして、カーソルをデータ上に持って行った際にデータが表示されるようにしておきます。

タイトル部分のテーブルとデータ部分のテーブルの幅を指定する際に、「<col style="width: 20%;" />」を採用しています。

各テーブルの幅が違う場合はCSSのクラスで幅を指定するより「col」で縦の列に対して幅を指定すると多くの場合スマートになります。

サンプルではHTML5形式で作成していますので「<col width="20%;" />」ではなく、「<col style="width: 20%;" />」を採用(HTML5ではcolのwidth属性は廃止)しています。

XHTMLでは「<col width="20%;" />」とすると良いでしょう。

表示するデータが多く、縦の画面サイズが決められている場合、このようなテーブルを作成できれば心強いのではないでしょうか。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

/* 外枠部分 */
div.y_data_area {
  width: 600px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  border-left: 1px solid #CCC;
}
 
/* タイトル部分 */
table.y_data_title {
  width: 600px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0; /* tableのcellspacing="0"の代わり */
}
 
table.y_data_title th {
  border-top: 1px solid #CCC;
  background: #EEF1F4;
}
 
table.y_data_title th,
table.y_data_title td {
  padding: 2px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
 
table.y_data_title th.r_none,
table.y_data_title td.r_none {
  border-right: none; /* 右ボーダーの重なりを防止 */
}
 
/* データ部分 */
div.y_scroll_box {
  width: 600px;
  max-height: 100px;
  height: auto !important; /* IE6 max-height対応 */
  height: 100px;　/* IE6 max-height対応 */
  overflow-x: hidden; /* 横スクロール非表示 */
  overflow-y: scroll; /* 縦スクロール */
}
 
div.y_hidden {
  overflow: hidden; /* IE系でデータ部分のテーブルをドラッグした際のズレを防止 */
  padding: 0 0 10px; /* スクロール仕切った際の下ボーダーの重なりを防止 */
}
 
table.y_data {
  width: 600px;
  border-collapse: separate;
  border-spacing: 0; /* tableのcellspacing="0"の代わり */
  table-layout: fixed;　/* 内容を固定 */
}
 
table.y_data th,
table.y_data td {
  padding: 2px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
 
table.y_data td {
  overflow: hidden; /* データが幅を超えたとき非表示に */
  white-space: nowrap; /* データの折り返しを防止 */
}
 
table.y_data td p {
  margin: 0; /* 余分なマージンを消去 */
}
 
/* IE6 */
table.y_data_title,
table.y_data {
  _border-collapse: collapse; /* IE6がborder-spacing: 0;に対応していないので */
}
 
/* IE7 */
*:first-child+html table.y_data_title,
*:first-child+html table.y_data {
  border-collapse: collapse; /* IE7がborder-spacing: 0;に対応していないので */
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

<!-- 外枠 -->
<div class="y_data_area">
    <!-- タイトル -->
    <table class="y_data_title">
        <col style="width: 20%;" />
        <col style="width: 20%;" />
        <col style="width: 20%;" />
        <col style="width: 20%;" />
        <col style="width: 20%;" />
        <tr>
            <th>タイトル</th>
            <th>タイトル</th>
            <th>タイトル</th>
            <th>タイトル</th>
            <th class="r_none">タイトル</th>
        </tr>
    </table>
    <!-- /タイトル -->
    <!-- データ -->
    <div class="y_scroll_box">
        <div class="y_hidden">
            <table class="y_data">
                <col style="width: 20%;" />
                <col style="width: 20%;" />
                <col style="width: 20%;" />
                <col style="width: 20%;" />
                <col style="width: 20%;" />                    
                <tr>
                    <td><p title="データデータデータデータデータデータデータデータデータ">データデータデータデータデータデータデータデータデータ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td class="r_none"><p title="データ">データ</p></td>
                </tr>
                <tr>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td class="r_none"><p title="データ">データ</p></td>
                </tr>
                <tr>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td class="r_none"><p title="データ">データ</p></td>
                </tr>
                <tr>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td class="r_none"><p title="データ">データ</p></td>
                </tr>
                <tr>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td class="r_none"><p title="データ">データ</p></td>
                </tr>
                <tr>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td class="r_none"><p title="データ">データ</p></td>
                </tr>
                <tr>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td class="r_none"><p title="データ">データ</p></td>
                </tr>
                <tr>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td class="r_none"><p title="データ">データ</p></td>
                </tr>
                <tr>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td><p title="データ">データ</p></td>
                    <td class="r_none"><p title="データ">データ</p></td>
                </tr>
            </table>
        </div>
    </div>
    <!-- /データ -->
</div>
<!-- /外枠 -->

>

PAGETOP