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

Technology Note 開発者向けBLOG

Webデザイン

データの一部をロックして、他の部分を横スクロール

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

前回は縦にスクロールする表示方法をご紹介いたしました。

今回は横にスクロールさせる方法をご紹介いたします。

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

  1. 外枠部分
  2. ロック部分
  3. 横スクロール部分

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

1
2
3
4
5
6
7

div.x_data_area {
  width: 900px;
  overflow: hidden; /* floatさせた要素を内包しているため指定 */
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  border-left: 1px solid #CCC;
}

ロック部分はdivとテーブルで構成します。

「<div class="lock_box">」には横スクロール部分と横に並ばせるため「 float: left;」と「 width: 300px;」として幅を指定します。

1
2
3
4
5

/* ロック部分 */
div.lock_box {
  float: left;
  width: 300px;
}

横スクロール部分もロック部分と同様にdivとテーブルで構成します。

「<div class="x_scroll_box">」にはロック部分と横に並ばせるため、「float: left;」と「width: 599px;」として幅を指定し、 横スクロールをさせるため、「overflow-x: scroll;」を記述します。

また「overflow-y: hidden;」で縦スクロールを非表示にします。

1
2
3
4
5
6
7
8

/* 横スクロール部分 */
div.x_scroll_box {
  float: left;
  width: 599px;
  border-left: 1px solid #CCC;
  overflow-y: hidden; /* 縦スクロール非表示 */
  overflow-x: scroll; /* 横スクロール */
}

テーブルには「<div class="x_scroll_box">」の幅「width: 599px;」を超える値を指定します。

ここでは「.width2500」で「width: 2500px;」としています。

横スクロールさせるdiv(「<div class="x_scroll_box">」)の幅よりも大きい値をdiv中のテーブルに指定しなければ、 横スクロールはされません。

ロック部分内のテーブルと横スクロール部分内のテーブルは幅以外のプロパティが同じなので、 「.width300」、「.width2500」として、幅は別のクラスで独立させ「<table class="width300 data">」、「<table class="width2500 data">」というようにテーブルタグに複数のクラスを指定しています。

テーブル内のデータがthやtdの幅を超えたのときの為に、「table.data th」、「table.data td」に「overflow: hidden;」、 データが折り返して、ロック部分と横スクロールのズレがないように「white-space: nowrap;」を指定しておきます。

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

/* テーブル */
.width300 {
  width: 300px;
}
 
.width2500 {
  width: 2500px;
}
 
table.data {
  table-layout: fixed; /* 内容を固定 */
  border-collapse: separate;
  border-spacing: 0; /* tableのcellspacing="0"の代わり */
}
 
table.data th,
table.data td {
  padding: 2px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
 
table.data th.r_none,
table.data td.r_none {
  border-right: none; /* 右ボーダーの重なりを防止 */
}
 
table.data th {
  border-top: 1px solid #CCC;
  background: #EEF1F4;
}
 
table.data th,
table.data td {
  overflow: hidden; /* データが幅を超えたとき非表示に */
  white-space: nowrap; /* データの折り返しを防止 */
}

サンプル

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

/* 外枠 */
div.x_data_area {
  width: 900px;
  overflow: hidden; /* floatさせた要素を内包しているため指定 */
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  border-left: 1px solid #CCC;
}
 
/* ロック部分 */
div.lock_box {
  float: left;
  width: 300px;
}
 
/* 横スクロール部分 */
div.x_scroll_box {
  float: left;
  width: 599px;
  border-left: 1px solid #CCC;
  overflow-y: hidden; /* 縦スクロール非表示 */
  overflow-x: scroll; /* 横スクロール */
}
 
/* テーブル */
.width300 {
  width: 300px;
}
 
.width2500 {
  width: 2500px;
}
 
table.data {
  table-layout: fixed; /* 内容を固定 */
  border-collapse: separate;
  border-spacing: 0; /* tableのcellspacing="0"の代わり */
}
 
table.data th,
table.data td {
  padding: 2px;
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}
 
table.data th.r_none,
table.data td.r_none {
  border-right: none; /* 右ボーダーの重なりを防止 */
}
 
table.data th {
  border-top: 1px solid #CCC;
  background: #EEF1F4;
}
 
table.data th,
table.data td {
  overflow: hidden; /* データが幅を超えたとき非表示に */
  white-space: nowrap; /* データの折り返しを防止 */
}
 
table.data td p {
  margin: 0; /* 余分なマージンを消去 */
}
 
/* IE6 */
table.data {
  _border-collapse: collapse; /* IE6がborder-spacing: 0;に対応していないので */
}
 
/* IE7 */
*:first-child+html table.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
97
98
99
100
101
102
103
104
105
106
107
108

<!-- 外枠 -->
<div class="x_data_area">
    <!-- ロック部分 -->
    <div class="lock_box">
        <table class="width300 data">
            <col style="width: 50%;" />
            <col style="width: 50%;" />
            <tr>
                <th><span title="ロックタイトルロックタイトルロックタイトルロックタイトル">ロックタイトルロックタイトルロックタイトルロックタイトル</span></th>
                <th class="r_none"><span title="ロックタイトル">ロックタイトル</span></th>
            </tr>
            <tr>
                <td><p title="ロックデータロックデータロックデータロックデータロックデータロックデータ">ロックデータロックデータロックデータロックデータロックデータロックデータ</p></td>
                <td class="r_none"><p title="ロックデータ">ロックデータ</p></td>
            </tr>
            <tr>
                <td><p title="ロックデータ">ロックデータ</p></td>
                <td class="r_none"><p title="ロックデータ">ロックデータ</p></td>
            </tr>
            <tr>
                <td><p title="ロックデータ">ロックデータ</p></td>
                <td class="r_none"><p title="ロックデータ">ロックデータ</p></td>
            </tr>
            <tr>
                <td><p title="ロックデータ">ロックデータ</p></td>
                <td class="r_none"><p title="ロックデータ">ロックデータ</p></td>
            </tr>
        </table>
    </div>
    <!-- /ロック部分 -->
    <!-- 横スクロール部分 -->
    <div class="x_scroll_box">
        <table class="width2500 data">
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <col style="width: 10%;" />
            <tr>
                <th><span title="スクロールタイトルスクロールタイトルスクロールタイトルスクロールタイトルスクロールタイトル">スクロールタイトルスクロールタイトルスクロールタイトルスクロールタイトルスクロールタイトル</span></th>
                <th><span title="スクロールタイトル">スクロールタイトル</span></th>
                <th><span title="スクロールタイトル">スクロールタイトル</span></th>
                <th><span title="スクロールタイトル">スクロールタイトル</span></th>
                <th><span title="スクロールタイトル">スクロールタイトル</span></th>
                <th><span title="スクロールタイトル">スクロールタイトル</span></th>
                <th><span title="スクロールタイトル">スクロールタイトル</span></th>
                <th><span title="スクロールタイトル">スクロールタイトル</span></th>
                <th><span title="スクロールタイトル">スクロールタイトル</span></th>
                <th class="r_none"><span title="スクロールタイトル">スクロールタイトル</span></th>
            </tr>
            <tr>
                <td><p title="スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ">スクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータスクロールデータ</p></td>
                <td><p title="スクロールデータ">スクロールデータ</p></td>
                <td><p title="スクロールデータ">スクロールデータ</p></td>
                <td><p title="スクロールデータ">スクロールデータ</p></td>
                <td><p title="スクロールデータ">スクロールデータ</p></td>
                <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><p title="スクロールデータ">スクロールデータ</p></td>
                <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><p title="スクロールデータ">スクロールデータ</p></td>
                <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><p title="スクロールデータ">スクロールデータ</p></td>
                <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>
<!-- /外枠 -->

<

>

PAGETOP