2004.11.17

TRタグで無効になるスタイルは?

HTMLのTRタグに、CSSで何らかのスタイルを付与した場合、期待通りに表示されるスタイルと、そうでないスタイルがあります。
元々、TRは単なるです。実際にデータが入ってくるのは、THかTDなので、各ブラウザがTRの見た目に関して、CSSの実装をなおざりにしているのも分かる気がします。

Windows IE5.0では、確か水平方向の文字揃え(左とか中央とか)ができないはず。
他にもあるという噂を聞いたので、動作確認を行ってみようと思います。

図1のように見えることを期待して、TRタグにスタイルを付けました。

期待する表示例

図1 期待する表示例

1行目

color: white;
padding: 10px;
border: 1px #ff9900 solid;
background-color: #0099cc;
font: bold 20px Arial;
text-align: center;
height: 40px;

2行目

color: white;
padding: 10px;
border: 1px #ff9900 solid;
background: url(../archives/img/trimg.jpg) repeat-x;
font: bold 20px Arial;
height: 40px;

下の表をお使いのブラウザでご覧下さい。
どのように見えますか?コメントにどのように見えるか書き込んでいただければ幸いです。

確認用の表
text align center
text align left

私はWindows2000を使用しています。ブラウザ毎に見ると次のように表示されています。
IE5.5 →borderが無効。
NN7.0、Opera7 →boder、paddingが無効です。

イントラの場合はターゲットとするマシンが全てIE5.5以上というケースがあり、その場合は、背景色や文字揃えなどの一般的なスタイルなら、期待通りに表示されるようです。
ただ、インターネットの場合はIE以外でご覧の方もいらっしゃるので、TRタグにスタイルを指定する方法に頼るのは避けたほうが良いでしょう。

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

photo
admin