tableのセルにbox-shadowをかけると異常が。
http://gyazo.com/04cd0163c8d96289e2ff07ed1155acc7.png上記のように、tableのtdやthにbox-shadowとborder-radiusをかけるとFireFoxで見たときだけこのように描画されます。
どうしたら良いでしょう？
それは仕様です。諦めてマークアップ変えるしか実現方法はありません。
<table> ならいいけどその内部要素に border-radius や box-shadow は正直想定されてないと思うよ。
セルの中にdivを噛ませて、それを煮るなり焼くなりすればいいかと思います。
ここまであるので言わずもがな判るとは思いますが、後進のためにもメモ的に書きます。
border-radiusをあてるあたり、グリッドデザインの延長だと思いますが、<table>タグは表組みのためのものなので、使わない方がいいですね。
繰り返すものは<ul>とか<dl>、<section>、<article>とかでユニットを作って繰り返した方がマークアップ的にも適切だし、使いやすいですよ。
みんなの回答 4 件
それは仕様です。
諦めてマークアップ変えるしか実現方法はありません。
<table> ならいいけどその内部要素に border-radius や box-shadow は正直想定されてないと思うよ。
セルの中にdivを噛ませて、それを煮るなり焼くなりすればいいかと思います。
ここまであるので言わずもがな判るとは思いますが、
後進のためにもメモ的に書きます。
border-radiusをあてるあたり、グリッドデザインの延長だと思いますが、
<table>タグは表組みのためのものなので、使わない方がいいですね。
繰り返すものは<ul>とか<dl>、<section>、<article>とかでユニットを作って繰り返した方がマークアップ的にも適切だし、使いやすいですよ。
関連するトピックス