読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

【HTML・CSS】列の間にだけボーダーをつける

chuckです。タイトルはちょっと意味不明かもしれません。

画像で見たほうが早いですね。

 

要はこれを

f:id:chuck0523:20151004201800p:plain

 

こうしたいというお話。

  f:id:chuck0523:20151004202801p:plain

つまり、列の枠線としてではなく、列の区切りとしてボーダーをつけたいという使い方ですね。

 

HTML

まずHTML的にはこうです。

gist33c0acef264dda8ee13d

まあ、シンプルにtable > tr > td と入れ子になってますね。trにはtr、tdにはtdというクラス名をつけています。

 

CSS 

次にcssです。ここが目玉です。

gistcd87cc19cd447a2876b0

1コずつ解説していきます。

まず、最初のtableへのスタイルは見やすさのためなのでスルーして下さい。

 

そして、.tr .tdの要素にボーダーをかけてます。この状態がこちら。

f:id:chuck0523:20151004201800p:plain

全ての行に上下線が入っています。こちらから、不要な線を消します。

それがfirst-child とlast-childを使ったスタイル指定です。最初と最後の要素にborder:noneを指定しています。

それによって、「それ以外」の行だけにborder-topとborder-bottomが適用されます。

 

一度全てに適用してから、不要なスタイルを消す、という2段階になります。

 

notを使えばもっとカンタン

ちなみにnotという擬似要素を使えば、この処理をもっと簡潔に書くことができます。

それがこちら。

gist124d5d4f90600640f818

最初の要素(first-child)と最後の要素(last-child) 以外(not)にスタイルを適用しています。

 

参考:

CSS3で追加されたセレクタ「:not()」について考えてみました|Webpark

notってcss3のセレクタだったんですね。

 

追記:

HTML内のテキストに誤りがありました。

最後のTDのテキストが「一番上の行」となっていますが、正しくは「一番下の行」でした。