隣接する1pxのborderを重ねると1pxのborderになる

設置しているお絵かき掲示板のうちのひとつ、relmのカタログモードのモバイル対応作業を行いました。
テーブルタグ5列表示で、768pxのiPadで縮小がかかる状態でした…。

テーブルタグを撤去して、tdだったところをdivで囲って、borderで枠線をつけてみたら…。


↑
枠線が多くて目にうるさいような…。


↑
divをくっつければテーブルタグの時と同じ見た目に…と思いましたが、1pxのborderが隣接すると1pxのborderが2本並んでしまうので…。


↑
borderが完全に重なるように修正しました。

margin: 0 -1px -1px 0;

↑
右と下のmarginを-1px。
1pxのborderが2本あっても、完全に重なれば1pxのborderしか見えない筈なので…。

最初からこうすれば良かったのですが…。

【CSS】tableのborderが一部だけ太くなるのを回避する

このあたりの記事をななめ読みして…。


↑
右と、下のborderを消して…。

.catalog div:nth-of-type(5n)

↑
5の倍数の時は、右のborderを表示。

.catalog div:nth-last-of-type(-n+5)

↑
後ろから5個なら下のborderを表示。

.catalog div:nth-last-of-type(1)

↑
最後の1個なら右側にborderを表示。

そんなCSSを書いていました。
解像度別に、もし4列表示なら、もし2列表示なら、もし1列ならと何時間もかけて書きました。

divでボックスを2つ用意し、floatで横並びさせています。その2... - Yahoo!知恵袋

↑
あれ？もっとスマートな方法があるんじゃ…と思いながら検索して見つけた記事。

参考なったのは、ベストアンサーではなくて、他の回答者の方のコメントでした。

同じ太さの線が重なって太くなるはずがないんですよ。

あ…。
無駄な作業をしていた事に気が付きました…。
しかし…。

何番目系の便利なCSSまとめ

でできる事を知るよい機会だったのかもしれません…。


↑
iPad、iPhoneをChromeでエミュレート。
カタログモードだけモバイルに対応していなかったのですが何とかなりました。

お絵かき掲示板はこちら。