CSSでtable要素を綺麗に表示する

Bloggerテンプレートのtable要素の見た目に満足できなかったので変更したコードです。

結果

順位 タイトル 価格
1 漫画 君たちはどう生きるか ¥1,404
2 モデルが秘密にしたがる体幹リセットダイエット ¥1,080
3 はなになりたい ¥1,296

CSSコード

table {
  width: auto;
  background: #fff;
  color: #444;
  font-size:14px;
  border-collapse: collapse;
}
table th {
  background: #ddd;
  color: #000;
  text-align: center;
}
table th,
table td {
  padding: 0 10px;
  border: 1px solid #aaa;
}
table tr:hover {
  background: #eee;
}

参考サイト

コメント: 0

コメントを書く