スクロールできる表の両端の装飾

スクロールできる表の作り方は http://hail2u.net/blog/webdesign/scrollable-table.html で知った。

ここでは横スクロールできる表の両端に装飾を施し、開始・終了でその装飾を打ち消すようなスタイルを表示するようにした。ただ、明日にはこのコードの仕組みを忘れてそうで怖い。無茶苦茶してる気がしないでもない。

• Demo | JSFiddle

表の両端に装飾を施し

これは table 要素の擬似要素で。擬似要素の配置をposition: absolute で行うために起点が必要だったので、table の上に div を一つ設けている。

.x-scrolling-table {
  position: relative;
  width: 100%;
  background-color: white;
}

.x-scrolling-table-inner {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  table-layout: fixed;
}

.x-scrolling-table-inner::before,
.x-scrolling-table-inner::after {
 ...

開始・終了でその装飾を打ち消すようなスタイルを表示

これは最初と最後の th, td の擬似要素で。

.x-scrolling-table-inner tr > th:first-child::before,
.x-scrolling-table-inner tr > td:first-child::before,
.x-scrolling-table-inner tr > th:first-child::after,
.x-scrolling-table-inner tr > td:first-child::after,
.x-scrolling-table-inner tr > th:last-child::before,
.x-scrolling-table-inner tr > td:last-child::before,
.x-scrolling-table-inner tr > th:last-child::after,
.x-scrolling-table-inner tr > td:last-child::after {
  ...

もっとスマートな方法が知りたい。