2013年09月27日 / ホームページ
【CSS】filterプロパティはtableの枠線を消す?
IE独自のCSSプロパティに「filter」という、背景にグラデーションなど視覚的なプロパティです。
よくある話ですが、tableタグのヘッダーにグラデーションを入れてみたのですが…
枠線が消えました
枠線が消えたCSSソースコードはこちら
table th{
border: 2px #000 solid;
filter: progid:DXImageTransform.Microsoft.Gradient(Enabled=1, GradientType=1, StartColorStr=#fffffabb, EndColorStr=#fffffeee);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#fffffabb', endColorstr='#fffffeee')"
padding:5px;
}
table td{
border: 2px #000 solid;
padding:5px;
}
どうもfilterプロパティをセル(th・tdタグ)に使用すると枠線を超えてグラデーションがかかるようです。もしfilterプロパティをかける場合は、divタグにfilterプロパティを使用しますと枠線が表示するようです。
枠線が表示したCSSソースコードはこちら
table th div{
border: 2px #000 solid;
filter: progid:DXImageTransform.Microsoft.Gradient(Enabled=1, GradientType=1, StartColorStr=#fffffabb, EndColorStr=#fffffeee);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#fffffabb', endColorstr='#fffffeee')"
padding:5px;
}
table td{
border: 2px #000 solid;
padding:5px;
}
IE9から見た画像です。
filterプロパティがIE独自のため、他ブラウザ(Firefox・Chrome・Safariなど)でグラデーションをかける必要があります。グラデーション用の背景画像用意やCSS3対応ブラウザであれば、backgroundプロパティのlinear-gradient()関数を使用になります。
古い考えかもしれませんが、クロスブラウザ対応用に横幅1pxのgif画像を作成して背景画像にするのがおすすめです。