boderプロパティのdottedの一部がドットにならない現象

boderプロパティでdottedを指定したときにドット線の一部がドットにならなくその部分がドットが繋がってsolidになったような現象に遭遇しました。今のところtable要素のみでしか確認していません。

そもそも一部がドットにならない現象というのはどういった事かと言うと、下記図のようなことになります。

Chromeで検証していたのですが、幅サイズが偶数だとドットが3つ重なり、奇数だとドットが2つ重なる、というえらいトリッキーな感じです。

そもそもどういった場合に起こるかというと下記のようなスタイル指定が原因となります。Reset.cssやNormalize.cssにも指定されています。

table {
  border-collapse: collapse;
  border-spacing: 0;
}

対処法

こういった場合、どうしようもない感じですので、対処法は次のような感じになります。

  • table要素にはドット線は使わないようにする
  • dottedを使わずにdashedにする
  • 背景画像で指定する

ちなみにdashedを使った場合は下記図のようになります。