CSSでテーブルの罫線を指定するときのコツ
CSSでテーブルの罫線を指定するとき、隣り合うセルの罫線が太くならないようにする。
tdとthの四方にCSSで罫線を設定するとセルが隣り合う部分の罫線が２重になり太くなってしまう。
なので、table自体に上と左に罫線を指定し、tdとthは下と右に設定するなどして太くなるのを回避してきた。
しかしこれでは、罫線の指定がバラバラになるため、できれば一括で指定したいと常々思っていた。
で、知人が雑誌に連載してる記事に書いてあった技を発見。
まずtdとthには一括で罫線をしていする。
例えば、
td,th {
border: 1px solid #990000;
}
で、次にこのセルを含むテーブルに適当なクラスかIDを設定し下記のように設定する。
.nanka {
border-collapse:collapse;
}
これで隣り合う罫線は１本の罫線にまとめられて太くならなくなる。
めでたしめでたし。
TOMさんに感謝!!
連載では初めてにして、最終回でテーブルネタをやりました(^_^;
少しでもご参考になればと思います。