クールでかっこいいワードプレステーマ を カスタマイズすべ

綺麗なテーブル1

こちらのサイトから→http://takeshishomepage.com/css3_cool_table
まんまだと、他のテーブルにも影響するので、 class=xtb” をつけて xtb のクラスのついたテーブルだけを綺麗なテーブルになるようにしました。

スタンダード プロフェッショナル エンタープライス
1000円 10000円 40000円
カスタムドメイン
アドバンスコントロール
アンリミテッドサポート ×
ユーザレジストレーション × ×

<table class="xtb">
<thead>
<tr>
<td></td>
<td>スタンダード</td>
<td>プロフェッショナル</td>
<td>エンタープライス</td>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td>1000円</td>
<td>10000円</td>
<td>40000円</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>カスタムドメイン</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<td>アドバンスコントロール</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<td>アンリミテッドサポート</td>
<td>×</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<td>ユーザレジストレーション</td>
<td>×</td>
<td>×</td>
<td>○</td>
</tr>
</tbody>
</table>
<style>
.xtb table{
	width:100%;
	margin:0 auto;
	border-collapse:separate;
	border-spacing:0;
	text-shadow:0 1px 0 #fff;
	color:#2a2a2a;
	background:#fafafa;
	background-image:-webkit-gradient(linear,center bottom,center top, from(#fff), color-stop(0.5, #eaeaea), to(#fff));
	background-image:-moz-linear-gradient(top,#fff,#eaeaea,#fff);
}

.xtb td{
	height:50px;
	line-height:50px;
	padding:0 20px;
	border-bottom:1px solid #cdcdcd;
	box-shadow:0 1px 0 white;
	-moz-box-shadow:0 1px 0 white;
	-webkit-box-shadow:0 1px 0 white;
	white-space:nowrap;
	text-align:center;
}

.xtb tbody td{
	text-align:center;
	font:normal 12px Verdana, Arial, Helvetica, sans-serif;
	width:150px;
}

.xtb tbody td:first-child{
	width:auto;
	text-align:left;
}

.xtb td:nth-child(2), td:nth-child(3){
	background:#efefef;
	background:rgba(144,144,144,.15);
	border-right:1px solid white;
}

.xtb td:nth-child(4){
	background:#e7f3d4;
	background:rgba(184,243,85,.3);
}

.xtb thead td{
	font: bold 1.3em 'trebuchet MS', 'Lucida Sans', Arial;  
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px; 
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top: 1px solid #eaeaea; 
}

.xtb thead td:first-child{
	border-top: none;
}

.xtb tfoot td{
	font: bold 1.4em Georgia;  
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px; 
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom: 1px solid #dadada;
}

.xtb tfoot td:first-child{
	border-bottom: none;
}
</style>