Bloggerでのtableの表現に満足できなかったので変更した時の話です。
結果
| 順位 |
タイトル |
価格 |
| 1 |
漫画 君たちはどう生きるか |
￥1,404 |
| 2 |
モデルが秘密にしたがる体幹リセットダイエット |
￥1,080 |
| 3 |
はなになりたい |
￥1,296 |
CSSコード
.post-body table {
width: auto;
border-spacing: 0;
font-size:14px;
color: #444;
}
.post-body table th {
color: #000;
padding: 4px 10px;
background: #eee;
background:-moz-linear-gradient(#eee, #ddd 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(#eee), to(#ddd));
font-weight: bold;
border-top:1px solid #aaa;
border-bottom:1px solid #aaa;
line-height: 110%;
text-align: center;
text-shadow:0 -1px 0 rgba(255,255,255,0.9);
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.post-body table th:first-child {
border-radius: 5px 0 0 0;
border-left:1px solid #aaa;
}
.post-body table th:last-child {
border-radius:0 5px 0 0;
border-right:1px solid #aaa;
box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.post-body table tr td {
padding: 0px 10px 0px 10px;
border-bottom: 1px solid #aaa;
border-left: 1px solid #aaa;
}
.post-body table tr td:last-child {
border-right: 1px solid #aaa;
box-shadow: 0px 0px 1px rgba(0,0,0,0.1);
}
.post-body table tr {
background: #fff;
}
.post-body table tr:nth-child(2n+1) {
background: #f5f5f5;
}
.post-body table tr:last-child td {
box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.post-body table tr:last-child td:first-child {
border-radius: 0 0 0 5px;
}
.post-body table tr:last-child td:last-child {
border-radius: 0 0 5px 0;
}
.post-body table tr:hover {
background: #eee;
cursor:pointer;
}
参考サイト
