（この記事は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;
}
３のアイコンはマテリアルアイコンを使うことにしておきました。
仕上がりはこんな感じです。
なかなかいい感じになってきたかも。。。