tableの外枠線だけを消してみる

tableの外枠にborderがないデザインってのがたまにあります。そんな時、以下のような力技でデザインを再現しているのを見かけたりしませんか？

  1. セル（th、td）のborder-topやborder-leftだけにborderの指定
  2. table内のタグ（tr、th、tdなど）にclassをつけて不要なborderを削除

でもこれだとHTMLもCSSも煩雑化していてあまりイケてないですよね。
そこで今回はCSSのみで解決する方法を考えてみました。

CSSサンプルコード

.Parent {
  padding: 8px;
  background-color: #ffffe3;
}

table {
  border: 1px solid #ffffe3;
  width: 100%;
}

td {
  border: 1px dotted #aaa;
  padding: 15px;
  text-align: center;
}

サンプルを見る

要は親要素の背景色とtableのborder-colorを同色にするってだけです（「消す」というより「視覚的に見えなくする」といった方が正しいですね）。ちなみに背景色がベタ塗りなのでborder-styleはsolidにします。

※YUI LibraryのCSS Resetを使用していますので、border-collapseなどはサンプルコードから除外しています。

transparentは使えない？

table {
  border: 1px solid transparent;
}

border-colorをtransparentにできるともっと楽なんですが、IE6などの古いブラウザーが対応していないようです。現状では「同色にする」が無難ですね。

親要素の「背景色がベタ塗り」などの制約はありますが、多少は使えるTipsではないかなーと思います。

Published:
Tag: