end0tknr's kipple - 新web写経開発

http://d.hatena.ne.jp/end0tknr/ から移転しました

bootstrap - テーブル

記事一覧→ http://d.hatena.ne.jp/end0tknr/20111016/1318729659

デフォルトのテーブルは、四隅を丸くする程度の表示です。(cssクラスを必要もありません)

<table>
  <thead>
    <tr><th>#</th><th>First Name</th><th>Last Name</th><th>Language</th></tr>
  </thead>
  <tbody>
  <tr><td>1</td><td>Some</td><td>One</td><td>English</td></tr>
  <tr><td>2</td><td>Joe</td><td>Sixpack</td><td>English</td></tr>
  <tr><td>3</td><td>Stu</td><td>Dent</td><td>Code</td></tr>
  </tbody>
</table>

.zebra-striped で1行毎に背景色を付けたり、js/jquery/jquery.tablesorter.min.js で行の並び替え機能を付けたりできます。ただし、.zebra-striped はie8ではどうさしませんでした。

<script src="js/jquery/jquery.tablesorter.min.js"></script>
<script>
  $(function() {
  $("table#sortTableExample").tablesorter({ sortList: [[1,0]] });
  });
</script>
<table class="zebra-striped">
  ...
</table>