枠線と罫線の色が異なる角丸のテーブルを作る

既に先行情報もありますが、おそらくそれらとは違う形で作れたのでメモとして。

類似のものがあればすみません…。

実現したいこと

• 四隅の角を丸くしたテーブルを作る
• テーブルの枠線と罫線で色を変える
• border-collapse: collapse;の指定はそのまま

サンプル

<div class="wrap">
  <table>
    <tr><th><th><td></td></tr>
    <tr><th><th><td></td></tr>
  </table>
</div>

.wrap{
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #333;
}
table{
  width:calc(100% + 3px);
  margin: -1px 0 -1px -1px;
  border-collapse: collapse;
}
td,th{
  border:1px solid #aaa;
}

ラッパーを使う簡単な仕組みです。

ラッパーとその内部要素の間に発生する隙間

枠線を持つ要素を、さらに枠線を持つ別の要素でラッピングした場合、以下のような問題が起こります。

• ブラウザ幅によって、主に右端で中と外の枠線の間に隙間ができる

把握している範囲ではですが、原因は以下の通り。

• 小数点以下の数値で変化しているため、特定のサイズで1pxのズレが出現する

真っ当な解決策は枠線をつかわないことしかないと思いますが、今回はトリッキーな方法として以下の指定を行い対応しました。

table{
  /* テーブルの横幅を少し広げてテーブル右の枠線をラッパーの下に隠す */
  width:calc(100% + 3px); 
  /* テーブルの上・下・左の枠線はネガティブマージンで隠す */
  margin: -1px 0 -1px -1px;
}

ボツ案

ラッパーにbox-shadowをinsetでつければいいのではと試しましたが失敗。

ラッパーはテーブルの下のレイヤーに存在するため、テーブル内の背景色がtransparent以外の場合はテーブルの背景色が優先されてしまいます。

ラッパーではなくtableにつけても同様で、thやtdに背景色があれば実現できません。

さらに言えば枠線は背景色よりも上のレイヤーに存在するため、box-shadowの色と違う枠線や罫線を使うと意図した見栄えにはなりません。

結び

上下方向のネガティブマージンには苦い思い出があるのであまり使いたくないのですが、計1pxならと妥協しました。