的確なタイトルが浮かびませんでしたが、右にあるキャプチャみたいにthやtdに指定されている線が開いている場合のサンプルです。
今まで、それなりにはコーディングしてきたつもりではいますが、今回のようなデザインは、はじめてだったので、最初に見た時どうやって組むのか分からなかったってのが、サンプルを作るきっかけになりました。
ぱっと見たときは、border-collapseとかborder-spacingやらをごにょごにょやってればいけるかなーって思ってたんですが、中々上手くいかず。
試行錯誤した結果、背景でやってみることにしたらうまく行きました。
---- こっから続き
ただ、背景でやるにしてもその切り方がちょっとだけ、工夫？する必要があります。
該当画像は、後ほど。
CSSは、こんな感じになってます。
#main table {
border-collapse: collapse;
border-spacing: 0;
width: 500px;
}
#main table th {
font-weight: normal;
vertical-align: top;
width: 100px;
padding: 5px 10px 12px 2px;
background: url(../img/share/bg_table_th.gif) no-repeat right bottom;
color: #666;
}
#main table td {
padding: 5px 10px 12px 10px;
background: url(../img/share/bg_table_td.gif) repeat-x right bottom;
}
背景を指定してる以外は特別これといったことはしてません。
んで、画像ですがこんな感じ↓で切ってます。
- th用の画像
想定されるテキストとかが多ければもっとながーく切らないとです。
- td用の画像
tdは、単純に横リピートなので、別に横長に切る必要はないです。
悩んだ結果こういう方法しか浮かばなかったんですが、他にこれを再現出来そうな方法しってたら教えてください＞＜！
- 各種SBMに追加
-
Track Back [1]
テーブルのボーダーに余白を付ける方法
購読しているCSS HappyLifeさんのテーブルのボーダーに余白がある場合のサンプルというエントリーに、最近僕も、余白のあるボーダーのテーブルをコーデ...
by code is not poetry｜2008年05月19日（月）
comment [4]
1 - SA さん
はじめましてっ。
thやtdの幅が固定でしたら、
tableの背景に縦線をleft100pxで縦リピート、
trの背景に横線を横下リピートでいけるんじゃないでしょうか？
2008年5月17日 00:05
2 - mitue さん
border-top:4px groove #fffffで近い感じになりませんか？
ブラウザで色が違うのでびみょーかも知れませんが・・・。
2008年5月18日 00:13
3 - hilca さん
tableに指定しているborder-collapseを取り除き、
th,tdに
border-top: 3px solid #fff;
border-bottom: 3px solid #666;
thには加えて、
background: url(bg_table_th.gif) repeat-y right bottom;
を指定します。
このときのbg_table_th.gifは横3px,縦必要分の大きさで、全て青く塗りつぶした後、一番下に3pxの白線部分を塗ってあります。
ブログの記事で紹介されている方法に比べれば、画像非表示時に、上下のボーダーだけでも残せて画像の容量も削減できるメリットがあります。
SAさんのようにtableに背景画像を用いて良い条件ならば、th又はtdに余白用画像(縦3pxの白で塗りつぶした画像)を適宜指定し、border-top: 3px solid #666;border-bottom: 3px solid #fff;をかぶせることでも実現可能だと思います。これだと、必要に応じてbg_table_th.gifの縦の長さを準備しなくてはならないデメリットもなくなります。
必要であればサンプルもすぐアップできるので、ご一報ください。
2008年5月20日 11:50
4 - とおりすがり さん
table {
border-collapse: collapse;
}
tr {
border-bottom: 3px solid #666;
}
td {
displayh: block;
margin: 3px 0;
border-left: 3px solid #00C;
}
あかん、IEうごかん。
2008年5月20日 16:19