2014-01-18

非screenデバイスでのスクロールできる表

スクロールできる表はscreenなデバイスのためのものなので、プリンターやスクリーン・リーダーではおかしなことになりうる。どうなるのかまったくわからないので、そのためのフォールバックはあった方が良さそう。Media Queriesでnotやprintを駆使して上書きするのが楽な感じ。

主にスクリーン・リーダー向けにscreen以外でdisplayプロパティーを戻してやり、更にプリンター向けに表がちゃんと折り返されるようにリセットしてやることにした。

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

th,
td {
  white-space: nowrap;
}

@media not screen {
  table {
    display: table;
  }
}

@media print {
  table {
    table-layout: auto;
  }

  th,
  td {
    white-space: normal;
  }
}

not screenでまとめても良さそうだけど、目的が違うものを混ぜるのもアレな感じがあるし、明示的に別にした。こうしておくと、なんのためにあるルールセットなのか数年後でもわかりそう。