CSS3でのテーブル装飾に手を加えてみた
書こうとおもいつつずいぶん経ってしまい、すっかり乗り遅れた感がありますが。
CSS3を使って美しく装飾されたテーブルの作り方|Webparkで紹介されていたCSS3でのテーブル装飾についてです。
これ、Chromeだとうまくいくんですが、MacのFirefox15.0.1だと、ちょっとおかしなところがあることに気づきました。こんな感じ。
右セルのshadowが下に被ってます。CSSの該当箇所は36-39行目。
table tr td:last-child { border-right: 1px solid #84b2e0; box-shadow: 2px 2px 1px rgba(0,0,0,0.1); }
ある意味指定通りではあります。Chromeだとシャドウはセルの下に隠れてくれるのですが、Firefoxはそうではないと。ちなみにW3C仕様のCSS Backgrounds and Borders Module Level 3を斜め読んでみた限りだと、このあたりの挙動は指定されていないようでした。
ということで、どうすればよいか考えてみたのですが、CSS3でテーブルを装飾するって結構面倒くさいですね…しばらく悩んだ結果、今回はこういう方針にしてみました。
- thとtdだけでなくtableそのものにもborder-radiusを適用
- thとtdにおけるouter box-shadowをやめる
- tableそのものにbox-shadowを適用(なのでtableのborder-collapseをseparateにしている)
これで、Firefoxの表示もこんな感じになりました。
CSSはこんな感じです。tableとth,tdでborder-radiusを2重指定してるのがちょっと気持ち悪いです。もっと上手く書ける方法があれば教えてください。
table { width: auto; border-spacing: 0; font-size:14px; border-collapse: separate; border-radius: 5px; box-shadow: 2px 2px 1px rgba(0,0,0,0.1); } table th { color: #fff; padding: 8px 15px; background: #258; background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%); background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9))); font-weight: bold; border-left:1px solid #258; border-top:1px solid #258; border-bottom:1px solid #258; line-height: 120%; text-align: center; text-shadow:0 -1px 0 rgba(34,85,136,0.9); box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset; } table th:first-child { border-radius: 5px 0 0 0; } table th:last-child { border-radius:0 5px 0 0; border-right:1px solid #258; } table tr td { padding: 8px 15px; border-bottom: 1px solid #84b2e0; border-left: 1px solid #84b2e0; text-align: center; } table tr td:last-child { border-right: 1px solid #84b2e0; } table tr { background: #fff; } table tr:nth-child(2n+1) { background: #f1f6fc; } table tr:last-child td:first-child { border-radius: 0 0 0 5px; } table tr:last-child td:last-child { border-radius: 0 0 5px 0; } table tr:hover { background: #bbd4ee; cursor:pointer; }