2012年2月13日月曜日

tableのレイアウトをいろいろ弄ってみる(1)

tableを構成している要素にfloatが効くことが分かったのでこれを使ってちょっと遊んでみた．実用上何のメリットがあるのかはさておき，cssだけでいろいろと面白いレイアウトが出来る．

display:block又はfloatが設定されたセル要素（td,th）にはtable要素のcellspacing属性が効かなくなり，サイズの自動調整が行われなくなる．またposition:relative，overflow等が有効となるので位置の調整が容易となる．

もちろんブラウザ全てで動作するわけじゃないけれど，tableの表示をtableの生成ロジックと分離する際のヒントとなれば幸いです．



表の転置（対角線をひっくり返す）


1234
1234
1234
 


<style type="text/css">
  #transpose table{
   border:solid 1px black;
  }
  #transpose th, #transpose td{
   width:50px;
   height:1em;
   float:left;
  }
  #transpose thead,#transpose tbody,#transpose tfoot{
   float:left;
  }
  #transpose tr{
   width:52px;
   float:left;
  }
  #transpose thead th{
   border:solid 1px red;
  }  
  #transpose tbody td{
   border:solid 1px blue;
  }  
  #transpose tfoot td{
   border:solid 1px green;
  }
 </style>
 <div id="transpose">
 <table cellspacing="0" cellpadding="0">
 <thead>
  <tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
 </thead>
 <tbody>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td></tr>
 </tbody>
 <tfoot>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
 </tfoot>
 </table>
 </div>
※tbodyとtfootの順番が本来と逆にしないと上手く行かない．

右から表示




<style type="text/css">
  #right table{
   border:solid 1px black;
  }
  #right th, #right td{
   width:50px;
   height:1em;
   float:right;
  }
  #right thead th{
   border:solid 1px red;
  }  
  #right tbody td{
   border:solid 1px blue;
  }  
  #right tfoot td{
   border:solid 1px green;
  }
 </style>
 <div id="right">
 <table cellspacing="0" cellpadding="0">
 <thead>
  <tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
 </thead>
 <tbody>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td></tr>
 </tbody>
 <tfoot>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
 </tfoot>
 </table>
 </div>

2列表示（その1・利用価値が余り無い気がする…）

ヘッダー・フッターを2列用意している部分は1列に変更することも出来るかも．

1234
1234
1234
1234
1234
2


3


4


5
※ie8だとズレる．
<style type="text/css">
  #double table{
   border:solid 1px black;
   width:418px;
  }
  #double tr{
   float:left;
   width:208px;
  }
  #double th, #double td{
   width:50px;
   height:1em;
   float:left;
  }
  #double thead th{
   border:solid 1px red;
  }  
  #double tbody td{
   border:solid 1px blue;
  }  
  #double tfoot td{
   border:solid 1px green;
  }
 </style>
 <div id="double">
 <table cellspacing="0" cellpadding="0">
 <thead>
  <tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
  <tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
 </thead>
 <tfoot>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
 </tfoot>
 <tbody>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>2</td><td></td><td></td><td></td></tr>
  <tr><td>3</td><td></td><td></td><td></td></tr>
  <tr><td>4</td><td></td><td></td><td></td></tr>
  <tr><td>5</td><td></td><td></td><td></td></tr>
 </tbody>
 </table>
 </div>

2列表示（その2）

縦に並んで右の列に折り返す．bodyの4行目から相対位置を指定してずらしている．


1234
1234
1234
1234
1234
2


3


4


5


6
※nth-childを使っているのでie8では動作しない．

<style type="text/css">
  #double2 table{
   border:solid 1px black;
   width:1px;
   height:1px;
  }
  #double2 thead{
   width:416px;
   float:left;
  }
  #double2 tbody{
   height:60px;
   width:208px;
   float:left;
  }
  #double2 thead tr{
   float:left;
   width:208px;
  }
  #double2 tfoot tr{
   float:left;
   width:208px;
  }
  #double2 tbody tr{
   width:208px;
   float:left;
   position:relative;
  }
  #double2 tbody tr:nth-child(n+4){
   top:-60px;
   left:208px;
  }
  
  #double2 th, #double2 td{
   width:50px;
   height:18px;
   float:left;
  }
  #double2 thead th{
   border:solid 1px red;
  }  
  #double2 tbody td{
   border:solid 1px blue;
  }  
  #double2 tfoot td{
   border:solid 1px green;
  }
 </style>
 <div id="double2">
 <table cellspacing="0" cellpadding="0">
 <thead>
  <tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
  <tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
 </thead>
 <tfoot>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
 </tfoot>
 <tbody>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>2</td><td></td><td></td><td></td></tr>
  <tr><td>3</td><td></td><td></td><td></td></tr>
  <tr><td>4</td><td></td><td></td><td></td></tr>
  <tr><td>5</td><td></td><td></td><td></td></tr>
  <tr><td>6</td><td></td><td></td><td></td></tr>
 </tbody>
 </table>
 </div> 

列の浮き上がり


1234
1234
1234
2


3


4


5


 
<style type="text/css">
  #pick table{
   border:solid 1px black;
  }
  #pick tr{
   width:200px;
  }
  #pick th, #pick td{
   width:50px;
   height:18px;
   float:left;
   background-color:white;
   position:relative;
  }
  #pick th:nth-child(2), #pick td:nth-child(2){
   top:-3px;
   left:-3px;
   background-color:yellow;
   box-shadow:3px 3px 0px black;
  }
  #pick thead th{
   border:solid 1px red;
   z-index:1;
  }  
  #pick tbody td{
   border:solid 1px blue;
   z-index:2;
  }  
  #pick tfoot td{
   border:solid 1px green;
   z-index:3;
  }
 </style>
 <div id="pick">
 <table cellspacing="0" cellpadding="0">
 <thead>
  <tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
 </thead>
 <tfoot>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
 </tfoot>
 <tbody>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>2</td><td></td><td></td><td></td></tr>
  <tr><td>3</td><td></td><td></td><td></td></tr>
  <tr><td>4</td><td></td><td></td><td></td></tr>
  <tr><td>5</td><td></td><td></td><td></td></tr>
 </tbody>
 </table>
 </div>

行ずらし

hoverと組み合わせてマウスを乗せると行がずれるようにしてみる．

1234
1234
1234
2


3


4


5


 
<style type="text/css">
  #select table{
   border:solid 1px black;
   width:208px;
  }
  #select tr{
   width:208px;
   float:left;
   position:relative;
  }
  #select tbody tr:hover{
   left:-5px;
   box-shadow:5px 0px 0px black;
  }
  #select th, #select td{
   width:50px;
   height:18px;
   float:left;
   background-color:white;
   position:relative;
  }
  #select thead th{
   border:solid 1px red;
   z-index:1;
  } 
  #select tbody td{
   border:solid 1px blue;
   z-index:2;
  }  
  #select tfoot td{
   border:solid 1px green;
   z-index:3;
  }
 </style>
 <div id="select">
 <table cellspacing="0" cellpadding="0">
 <thead>
  <tr><th>1</th><th>2</th><th>3</th><th>4</th></tr>
 </thead>
 <tfoot>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
 </tfoot>
 <tbody>
  <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
  <tr><td>2</td><td></td><td></td><td></td></tr>
  <tr><td>3</td><td></td><td></td><td></td></tr>
  <tr><td>4</td><td></td><td></td><td></td></tr>
  <tr><td>5</td><td></td><td></td><td></td></tr>
 </tbody>
 </table>
 </div>
時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

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