2012年3月5日月曜日

css3でtableを途中で折り返してみる

県別集計データ等，横幅と比較して縦の長さが非常に大きくなることがある．そのような場合，テーブルをスクロール可能とするのではなく，テーブルの構造を組み換えて単一のtr要素に複数の県データを挿入し，あたかも途中でデータが折り返されたように見せることはよくあることと思う．しかし表が最構成されてしまったことにより，データの再利用が困難になるなどデメリットも発生する．

このような処理をcssのみで実現する方法を考えついたので公開してみる．テーブル要素には一切手を入れずレイアウトを変更するので再利用性が高い．また以前公開したものとは異なり，行数が変化してもスタイルシートの再構成は必要ない．

例によってfirefox， chrome，operaでしか動作確認はしてない．なお当方の環境（firefox-nightly）では，印刷時にレイアウトが狂ってしまったので，まだ改善の余地はあるようだ．
  • 基本方針はdisplayプロパティ等を弄ってtable要素の配置をバラバラにする．
    • table…display:block
    • thead，tfoot，tbody…display:inline
    • tr…display:inline-block
    • th，td…float:left
  • table要素にcolumn-countプロパティを施して行の改列が行われるようにする．
  • th要素，td要素の幅を調整し，tr要素毎に改行が行われるようにする．
この方法ではセルの隙間の制御を行う際に通常のmargin，padding，cellspacingの他に加え，font-size，letter-spacing，word-spacingを考えなければならない．
これはthead,tfoot,tbody要素がインライン要素となったことに起因するもので，インライン要素内の改行やタブなどの制御文字はスクリーン表示時にスペースとしてレンダリングされてしまうのだ．そのため，table要素には「font-size:0; letter-spacing:0; word-spacing:0;」を指定してこの余計なスペースを削除し，改めてtr,th,td要素にmargin設定を行うことでレイアウトの制御がやりやすくなる．
※今回はfont-size:0だけでいいようだ．





なお，このままだとcaption要素が非表示となってしまうが，table要素をdiv要素で囲み，position:absoluteで絶対位置指定すると表示させることが可能だ．
firefoxに限り，thead要素に同様のテクニックを施し，背景にelement関数を使うことでヘッダー部分の繰り返し表示が可能である．

このように非常に使い勝手がいいわけだが，反面cssのメンテナンスが難しいかもしれない．テーブルをばらすという一般的でない操作を行っているので，レイアウトの微調整に苦労するとおもう．実際，列数による幅の分割を考慮するとセルの幅をいくつにしないとだめとか悩ましいところだ．
<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 <style type="text/css">
#multiColumned{
 display:block;
 width:609px;
 padding:1px;
 -moz-column-count: 4;
 -webkit-column-count: 4;
 -o-column-count: 4;
 -ms-column-count: 4;
 -khtml-column-count: 4;
 column-count: 4;
 -moz-column-gap:3px;
 -webkit-column-gap:3px;
 -o-column-gap:3px;
 -ms-column-gap:3px;
 -khtml-column-gap:3px;
 column-gap:3px;
 /*inline-blockの周りに入る余計な空白を取り除く*/
 font-size:0;
   letter-spacing:0;
   word-spacing:0;
}
#multiColumned,#multiColumned th,#multiColumned td{
 border:solid 1px black;
}
#multiColumned thead,#multiColumned tfoot,#multiColumned tbody{
 display:inline;
}
#multiColumned tr{
 display:inline-block;
 margin:1px 0 0 0;
}
#multiColumned th,#multiColumned td{
 float:left;
 width:70px;
 margin:0 1px 0 1px;
 font-size:14px;
}

 </style>
 <!--
 <script type="text/javascript">
 </script>
 -->
 </head>
 <body>
<table id="multiColumned" cellspacing="0" cellpadding="0">
 <thead>
  <tr><th>県名</th><th>count</th></tr>
 </thead>
 <tbody>
  <tr><td>北海道</td><td>1</td></tr>
  <tr><td>青森県</td><td>2</td></tr>
  <tr><td>岩手県</td><td>3</td></tr>
  <tr><td>宮城県</td><td>4</td></tr>
  <tr><td>秋田県</td><td>5</td></tr>
  ・・・
 </tbody>
 <tfoot>
  <tr><td>全国</td><td>---</td><tr>
 </tfoot>
</table>
 </body>
</html>
時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)