画面幅いっぱいのスクロール可能なtableに関するメモ

SCSSで表現すると以下の通り。

table {
  width: 100%;

  thead, tbody {
    display: block;
    overflow-y: scroll;

    tr {
      display: table;
      width: 100%;
    }
  }

  tbody {
    height: XXXpx;

    tr {
      height: YYYpx;
    }
  }
}

• tbodyの高さ < trの数 * trの高さになるとスクロール可能になる。
• theadの横にscrollbarの太さと同じ幅の隙間が別の方法で作れればより格好良くなる。
• Ubuntu上のFirefoxとGoogle Chromeでしか表示確認していない。