CSS の display:grid; で表組をやってみた。

by · 公開済み · 更新済み

CSS の display:grid; は中々良くできていて、今後のレイアウトの基本となる可能性を秘めている。
先日、プログラマーと表組の面倒臭さに関して話しているときに、私は「gridはテーブルに似ているので表組に使えるかもしれない」と言った。
私のようにWEBデザインがこの世に生まれた頃から存在する人間としては、gridの仕様を見たときに「おっ、昔のテーブルレイアウトみたい！」と感じたものだったのだ。

tableタグによるレイアウト

tableタグによるレイアウトの良いところ? はセルの中に強制的（物理的）にコンテンツを配置することができることだろだ。
もちろん太古の昔のWEBレイアウトでは、その方法しか無かったのだが、gridは新しくもあり、どこか古い印象を持ったことも事実だ。
そのような経験もあり、gridがtableタグ変わりに使えるのではとはぼんやりと思っていたが、自分で言いながら試したことは無かった。
もちろん表組にtableタグを利用するのは、現在でも王道だ。しかし、何しろレスポンシブに対応することが無理である。

display病

もちろんdisplay:grid;は「便利そう…」だけでなく、中々画期的で便利なのである。
gridとflexを活用すればこれまでのレイアウト方法が大きく変わるだろう。
この二つの組み合わせとdisplayプロパティの多用によるCSSは、将来display病と呼ばれるかも知れない。

display:grid;って便利そう

CSSによるdisplay:grid;は言い換えれば可変構造テーブル（Variable structure Table）である。
と、名付けるほどでもないが、HTMLである程度汎用性のある構造を作っておけば、CSS側でテーブル構造を変更できる。
これを使えば今まで悩んでいたレスポンシブ対応の表組が簡単にできるのではないか！と思い実際にコーディングしてみた。
逆に言えばレスポンシブ対応でなければtableタグやflexを使えば良いわけで、、。
まぁ、それ程声を大きくするほどでは無いが、思っている物の実例をあまり見ないので何処かの誰か、未来の自分のために覚書です。
ちなみ初期バージョンではgapを利用して罫線を表現していたが、線のバリエーションが貧弱になるので、オーソドックスなborder指定としました。

プレビュー

PC サンプル1
PC サンプル2
SP レスポンシブ
SP レスポンシブ position: sticky;
表のプレビュー

コード

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<h2>grid表レイアウト</h2>
<p>gridで表をレイアウト、レスポンシブ対応</p>
<style>
    .sheet{
        display: grid;
        width: 70%;
        margin: auto;
        border: 3px solid rgb(255, 0, 0);
        grid-template-columns: 1fr;
        grid-template-rows:  max-content max-content 1fr;
        overflow-x: auto;
    }
    .t-header .row,
    .t-body .row,
    .t-footer .row{
        display: grid;
        grid-template-columns: 10em 1fr 1fr 6em 1fr 1fr 1fr;
        flex-wrap: wrap;
        text-align: center;
        align-items: initial;
    }
 
    .t-header{
        background-color: rgb(61, 37, 28);
        color: #fff;
    }
    .t-body{
        background-color: rgb(221, 255, 121);
    }
    .t-footer{
        background-color: rgb(247, 179, 255);
    }
    .row span{
        display: flex;
        justify-content: center;
        align-items: center;
        word-break: break-word;
        border-right: 1px solid;
        border-bottom: 1px solid ;
    }
    /* col headlines
    .sheet .row > span:first-child {
    background-color: #ccc;
    }
    */
    .row span:last-child{
        border-right: none;
    }
    .t-header .row span{
        font-weight: bold;
    }
    .t-footer .row span{
        border-bottom: none;
    }
    /********2row1cell**********/
    .inner-row{
        border-right: 1px solid;
    }
    .inner-row span{
        display: block;
        width: 100%;
        border-bottom: 1px dotted;
    }
    .inner-row div:last-child span{
        border-bottom: 1px solid;
    }
 
    @media screen and (max-width: 600px) {
        .sheet{
            width: 100%;
            overflow-x: initial;
        }
        .t-header{
            position: sticky;
            width: 100%;
            top: 0px;
        }
        .t-header .row,
        .t-body .row,
        .t-footer .row{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows:  max-content max-content 1fr;
        }
        .t-body .row {
            border-bottom: 1px solid;
        }
        .row span:last-child{
            grid-column: 1 / 4;
        }
        .row span:nth-child(3),
        .row span:nth-child(6),
        .t-footer .row{
            border-right: none;
        }
        .t-footer .row span{
            border-bottom:  1px solid;
        }
        .t-footer .row span:last-child{
            border-bottom: none;
        }
    }
</style>
 
 
<h3>sheet sample 1</h3>
<div class="sheet">
    <div class="t-header">
        <div class="row"><span>編集</span><span>名称</span><span>略称</span><span>見出し</span><span>データ</span><span>効率</span><span>成分</span></div>
    </div>
    <div class="t-body">
        <div class="row"><span>10000</span><span>2.0000</span><span>250あああ</span><span>3000</span><span>480</span><span>100</span><span>10</span></div>
        <div class="row"><span>1000 100 </span><span>200</span><span>250</span><span>3000</span><span>480</span><span>100</span><span>10</span></div>
        <div class="row"><span>100</span><span>200</span><span>250</span><span>3000</span><span>48abcd0</span><span>100</span><span>How to make Realistic Water</span></div>
        <div class="row"><span>100</span><span>abcd abcdabcd abcdabcd abcd</span><span>250</span><span>3000</span><span>480</span><span>20</span><span>10</span></div>
        <div class="row"><span>100</span><span>200</span><span>金融緩和策修正の是非協議 市場は観測強まり長期金利上昇</span><span>3000</span><span>480</span><span>100</span><span>10</span></div>
        <div class="row"><span>1</span><span>200</span><span>200050</span><span>3000</span><span>480</span><span>250あああ250あああ250あああ</span><span>10</span></div>
        <div class="row"><span>100</span><span>200</span><span>250</span><span>3000</span><span>480</span><span>100</span><span>10</span></div>
        </div>
    <div class="t-footer">
        <div class="row"><span>2000</span><span>2000</span><span>Marketplace</span><span>2000</span><span>2000</span><span>2000</span><span>2000</span></div>
    </div>
</div>
 
<h3>sheet sample 2</h3>
<div class="sheet">
    <div class="t-header">
        <div class="row"><span>編集</span><span>食名称</span><span>略称</span>
            <div class="inner-row"><div><span>データ1</span></div><div><span>データ2</span></div></div>
            <div class="inner-row"><div><span>角度1</span></div><div><span>角度2</span></div></div>
            <span>温度</span><span>成分</span></div>
    </div>
    <div class="t-body">
        <div class="row">
            <span>100</span><span>200</span><span>250</span>
            <div class="inner-row"><div><span>3000</span></div><div><span>3000</span></div></div>
            <div class="inner-row"><div><span>480</span></div><div><span>480</span></div></div>
            <span>100</span><span>10</span>
        </div>
        <div class="row">
            <span>100</span><span>200</span><span>250</span>
            <div class="inner-row"><div><span>3000</span></div><div><span>3000</span></div></div>
            <div class="inner-row"><div><span>480</span></div><div><span>480</span></div></div>
            <span>100</span><span>10</span>
        </div>
        <div class="row">
            <span>100</span><span>200</span><span>250</span>
            <div class="inner-row"><div><span>3000</span></div><div><span>3000</span></div></div>
            <div class="inner-row"><div><span>480</span></div><div><span>480</span></div></div>
            <span>100</span><span>10</span>
        </div>
        <div class="row">
            <span>100</span><span>200</span><span>250</span>
            <div class="inner-row"><div><span>3000</span></div><div><span>3000</span></div></div>
            <div class="inner-row"><div><span>480</span></div><div><span>480</span></div></div>
            <span>100</span><span>10</span>
        </div>
        <div class="row">
            <span>100</span><span>200</span><span>250</span>
            <div class="inner-row"><div><span>3000</span></div><div><span>3000</span></div></div>
            <div class="inner-row"><div><span>480</span></div><div><span>480</span></div></div>
            <span>100</span><span>10</span>
        </div>
        <div class="row">
            <span>100</span><span>200</span><span>250</span>
            <div class="inner-row"><div><span>3000</span></div><div><span>3000</span></div></div>
            <div class="inner-row"><div><span>480</span></div><div><span>480</span></div></div>
            <span>100</span><span>10</span>
        </div>
        <div class="row">
            <span>100</span><span>200</span><span>250</span>
            <div class="inner-row"><div><span>3000</span></div><div><span>3000</span></div></div>
            <div class="inner-row"><div><span>480</span></div><div><span>480</span></div></div>
            <span>100</span><span>10</span>
        </div>
    </div>
    <div class="t-footer">
        <div class="row"><span>2000</span><span>2000</span><span>2000</span><span>2000</span><span>2000</span><span>2000</span><span>2000</span></div>
    </div>
</div>

サンプルファイル　ダウンロード

“sampleGridTable” をダウンロード sampleGridTable.html – 14 回のダウンロード – 7.47 KB

タグ:

おすすめ