border-collapse で collapse を指定すれば border が重なり合う

Sorai — Wed, 03 Jun 2009 14:24:24 +0000

ただ普通にテーブルを使うと、影のついた変な線が出てくると思います。
これをそのまま使うのはあまり良くないので、table に cellspacing=”1″ して背景色を枠線に見せるのも良いんですが、枠線はやっぱり border で出したい。でも border で枠線を出すと、隣のセルと枠線が重なり合って、枠線が2pxになっちゃうので使えないと思っていたのですが、CSS で border-collapse で collapse を指定すれば、枠線が重なりあって2pxから1pxになってくれるみたいです。メモメモ。
border-collapse－スタイルシートリファレンス

IE で border を指定した時に線と線が繋がるのを防ぐ方法

Sorai — Fri, 29 May 2009 03:56:35 +0000

IE では border で 1px の点線を引くと、スクロールしたりしたときに線と線がくっついて見栄えが悪くなってしまうことがあります。私は Firefox では問題なく表示されるし、たまにしか表示されないので気にしていなかったのですが、今日お客さんから直してくれと頼まれたので直すことになりました。

わざわざくっつかない線を表示するために画像を使うのは嫌なので、CSS でなんとか出来る方法を探していたら以下の方法を発見しました。
タグメモのカケラ | IEで、ボーダーがうまく表示されない

点線を指定している id や class に対して position: relative を指定すると良いそうです。

hoge {
margin: 10px 0;
padding: 10px;
border: 1px #dddddd dashed;
position: relative;
}

でも私の環境では何も解決されませんでした。解決できなかった人は border を 2px にしたりすると解決されますのでいろいろ試してみるのも良いかもしれませんね。何か他にも方法があったら教えてほしいです。

ウェブル » border

border-collapse で collapse を 指定すれば border が重なり合う

IE で border を指定した時に線と線が繋がるのを防ぐ方法

border-collapse で collapse を指定すれば border が重なり合う