[Rails] scaffold.css を編集して table を見やすくする

Rails3.1で作成した scafold ファイルの index.html.erb の table を見やすくするために scaffold.css を編集してみました。

表に線があるだけでかなり見やすくなりますね。

■ public/stylesheets/scaffold.css

.scaffold_table {
  border-collapse: collapse;
  border: 1px #DCDCDC solid;
}
 
.scaffold_table th {
  border: 1px #DCDCDC solid;
  padding: 5px;
}
 
.scaffold_table td {
  border: 1px #DCDCDC solid;
  padding: 5px;
}

CSSファイルを編集したら、scafold機能で作成したテンプレートファイルの table タグに class=’scaffold_table’ を追加して、スタイルを反映させます。

■ app/views/books/index.html.erb

<h1>Listing books</h1>
 
<table class='scaffold_table'>
  <tr>
    <th>id</th>
    <th>Title</th>

以上です。

【参考】

スタイルシート[CSS]/テーブル/表の境界線を指定する – TAG index Webサイト はてなブックマーク - スタイルシート[CSS]/テーブル/表の境界線を指定する - TAG index Webサイト