(この記事は2020-4-26にリメイクしました)
前回の記事で、テーブルの一覧を表示するようにしました。
内容は「テーブル名: table name」と「テーブルコメント: table comment」だけにしてあります。
それ以外の情報はここでは不要で、シンプルに見られるようにしておきました。
サンプルの題材にはWordpressのテーブルを使いました。
見ていただくとわかるように、テーブル名だけ見て用途のわかりそうなものもありますが、なんだかよくわからないものもあります。
こういう時にテーブルの名前の付け方って重要だなぁ、と思います。
ここで注目したいのは、それぞれのテーブルに「コメントが書かれていない」というところです。
そのテーブルの用途や、使用上注意することなどがちょっと書いてあるだけで、エンジニアとしてはすごく助かると思うんですけどね。
そこで、それならということで、わかりやすくする為に、テーブルコメントを簡単に編集できるようにしておこうと思います。
もちろん、テーブルコメントの修正は、わざわざこんなことをしなくてもちょっとSQL文を書けば出来る*1 ことなのですが、たくさんあると手間も大変ですし、その先の「横着」のためにもここは手をかけて機能を付けておきます。
表にスタイルをつける
まず、次に進む前にこんな感じで簡単にスタイルをつけておきます。
- セルの幅を調節する
- 見出し行を固定する
- アクションのトリガーにするアイコンを追加する
- その他の飾りは適当に
2の見出し行は固定表示するようにしておきます。
表が大きくなると、スクロールした時にその列が何の列かわからりずらい事があるからですが、こういうスタイルは習慣付けておきたいものです。
ポイントは<thead>
と<tbody>
をちゃんと使うこと。(これを省略してしまうエンジニアは多い)
スタイルシートは、それぞれ"display"を"block"にして、tbodyの高さだけ決めてあげれば良いです。。。簡単です。
<table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table>
のような構造にしておいて、スタイルシートはこんな感じにしておきました。
thead,tbody { display:block; } tbody { height:(好きな高さ); overflow-y:scroll; }
3のアイコンはマテリアルアイコンを使うことにしておきました。
仕上がりはこんな感じです。
なかなかいい感じになってきたかも。。。