タグ

2009年12月10日のブックマーク (1件)

  • テーブルのボーダーに余白がある場合のサンプル

    的確なタイトルが浮かびませんでしたが、右にあるキャプチャみたいにthやtdに指定されている線が開いている場合のサンプルです。 サンプルページ サンプルダウンロード(zip:15kbくらい) 今まで、それなりにはコーディングしてきたつもりではいますが、今回のようなデザインは、はじめてだったので、最初に見た時どうやって組むのか分からなかったってのが、サンプルを作るきっかけになりました。 ぱっと見たときは、border-collapseとかborder-spacingやらをごにょごにょやってればいけるかなーって思ってたんですが、中々上手くいかず。 試行錯誤した結果、背景でやってみることにしたらうまく行きました。 ただ、背景でやるにしてもその切り方がちょっとだけ、工夫?する必要があります。 該当画像は、後ほど。 CSSは、こんな感じになってます。 #main table { border-coll

    テーブルのボーダーに余白がある場合のサンプル
    mugi531
    mugi531 2009/12/10
    th とか td の左端にだけ線を引くアレに余白をつけるテク。これ知りたかったけどイマイチ検索ワードが分からないんだよなぁ