裏紙に書く程度の内容

border-collapse collapse にしてもボーダーが重ならない

stylesheet の border で罫線を引く場合、border-collapse: collapse;を指定すると境界線にある罫線は重ねて1本になります。

しかし、divタグ等、table以外ででレイアウトしている際はこの指定が効きません。

その修正方法のメモです。

border-collapse とは

border-collapseとは、隣接する要素の罫線を重ねるか、隙間をを指定するプロパティです。
詳細な説明は下記などを参照してください。

border-collapse-スタイルシートリファレンス

但し,この指定はtableの要素のみに効果があります。

ダメな例

実際に効いていない例を確認します。

まず、border-collapseを指定していない状態から確認します。

<div class="panel">
  <div class="row">
    <div class="data">data1</div>
    <div class="data">data2</div>
    <div class="data">data3</div>
  </div>
  <div class="row">
    <div class="data">data4</div>
    <div class="data">data5</div>
    <div class="data">data6</div>
  </div>
</div>
.panel .row .data {
  display: inline-block;
  width: 5rem;
  border: 1px solid;
}

ブラウザでの表示は以下のようになります。

collapse1_mini

各データ間のボーダーが並んで表示されるため太くなっているように見えます。

そこでborder-collapseを指定し、隣り合うデータのボーダは重ねることを試みます。

/* 追加 */
.panel {
  border-collapse: collapse;
}

/* 追加 */
.panel .row {
  border-collapse: collapse;
}

.panel .row .data {
  display: inline-block;
  border: 1px solid;
  width: 5rem;
  border: 1px solid;
  border-collapse: collapse; /* 追加 */
}

collapse2_mini

関係ありそうなところすべてに追加してみましたが、さっきと同じですね。border-collapseが効いていません。

これはborder-collapsetable(とinline-table)にのみ設定できる仕様のため、上記のようなdivに設定しても意味がありません。

それならhtmlを書き換えてtableタグにしちゃえばいいんですが、そうもできない場合の対処法を紹介します。

修正方法

display: table を使う方法

まずは素直に border-collapseが効くようにする修正方法です。

display: tableを使用します。

.panel {
  display: table; /* or inline-table */
  border-collapse: collapse;
}

.panel .row {
  display: table-row;
}

.panel .row .data {
  display: table-cell; /* inline-block から変更 */
  border: 1px solid;
  width: 5rem;
  border: 1px solid;
}

collapse2-2_mini

修正できました。table,tr,tdの代わりになる要素にそれぞれdisplay: table , table-row, table-cellを指定しています。

display: table 以外の方法

ついでに違う修正方法も。状況によってはこっちのほうが使いやすいかもしれません。

要は、各境界線にボーダーが1本だけにすればいいわけです。

/* 全体の左・上にボーダー */
.panel {
  display: inline-block;
  border-top: 1px solid red;
  border-left: 1px solid red;
}

.panel .row .data {
  display: inline-block;
  width: 5rem;

  /* dataクラスの右・下にボーダー */
  border-right: 1px solid;
  border-bottom: 1px solid;
}

data要素の右と下にボーダーを引きます。これだけだと全体の上・左に線が引けないので要素全体(ここでは’panel’クラス)の上・左にボーダーを追加します。

collapse3_mini

赤いのがpanelクラスのボーダー、黒いのはdataクラスで引いたボーダーです。

2種類のやり方を紹介しましたが状況により適切なほうで対処するといいと思います。

ただ、自分は前者の方法やるくらいだったら最初からテーブルタグで書いたほうがいいんじゃね?って思うのでdisplay: table;はあんまり使わないです。

広告
Index