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

Tadashi Shigeoka ·  Tue, November 15, 2011

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

Listing books

以上です。

【参考】

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

id Title