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>
namefield1field2field3field4field5field6field7field8field9
トマト4689765633
クレソン333333333
イチゴ7455343179