stickyにするとテーブルのボーダーが消えてしまう

• トップ
• トラブルシュート
• stickyにするとテーブルのボーダーが消えてしまう

現象

CSS でテーブルヘッダを position: sticky で固定すると、border で指定したボーダーが消えてしまう(透明になってしまう)という現象があります。スクロールさせると、スクロールコンテンツがボーダー部分でチラチラ見えてしまいます。

.my-scroll-table {
  width: 300px;
  height: 150px;
  overflow: auto;
  table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
    thead {
      position: sticky;
      top: 0;
    }
    th, td {
      height: 30px;
      text-align: center;
      border: 1px solid #ccc;
    }
    th {
      background-color: #ddd;
    }
  }
}

<div class="my-scroll-table">
  <table>
    <thead>
      <tr><th>AAA</th><th>AAA</th><th>AAA</th><th>AAA</th><th>AAA</th></tr>
      <tr><th>AAA</th><th>AAA</th><th>AAA</th><th>AAA</th><th>AAA</th></tr>
    </thead>
    <tbody>
      <tr><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td></tr>
      <tr><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td></tr>
        :
    </tbody>
  </table>
</div>

回避策

原因はよくわかりませんが、下記の様にすると回避できるようです。

• border-collapse: collapse を削除する。。
• すると線が分かれてしまうので border-spacing: 0 を指定する。
• すると線が太くなってしまうので、セルは上と右のみ枠線を引き、テーブルに下と左の線を引く。

修正部分は下記となります。

.my-scroll-table-2 {
  table {
    ...
    /* border-collapse: collapse; */
    border-spacing: 0;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    th, td {
      ...
      /* border: 1px solid #ccc; */
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
  }
}