HTML テーブルのデザイン調整
Nid: 658
- マウスオーバーでテーブルの行の色を変更する Hoverable Table
<style type="text/css">
tr:hover {background-color: #f5f5f5}
</style>
- テーブルをレスポンシブにする Responsive Table
以下のように div タグで囲う。
<div style="overflow-x:auto;"> <table> ... table content ... </table> </div>
| name | field1 | field2 | field3 | field4 | field5 | field6 | field7 | field8 | field9 |
|---|---|---|---|---|---|---|---|---|---|
| トマト | 4 | 6 | 8 | 9 | 7 | 6 | 56 | 3 | 3 |
| クレソン | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 | 3 |
| イチゴ | 7 | 4 | 5 | 5 | 34 | 3 | 1 | 7 | 9 |