<table class="cp_pricetable3">
<thead>
<tr>
<th class="group1">メニュー</th>
<th class="group2">メニュー</th>
<th class="group3">メニュー</th>
</tr>
</thead>
<tbody>
<tr>
<td class="group1">¥0,000</td>
<td class="group2">¥0,000</td>
<td class="group3">¥0,000</td>
</tr>
<tr>
<td class="group1">テキスト</td>
<td class="group2">テキスト</td>
<td class="group3">テキスト</td>
</tr>
<tr>
<td class="group1">テキスト</td>
<td class="group2">テキスト</td>
<td class="group3">テキスト</td>
</tr>
<tr>
<td class="group1"><a href="#" class="cp_btn">ボタン</a></td>
<td class="group2"><a href="#" class="cp_btn">ボタン</a></td>
<td class="group3"><a href="#" class="cp_btn">ボタン</a></td>
</tr>
</tbody>
</table>
.cp_pricetable3 *, .cp_pricetable3 *:before, .cp_pricetable3 *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_pricetable3 {
width: 100%;
margin: 0 auto;
border-spacing: 1px 0;
border-collapse: separate;
}
.cp_pricetable3 th, .cp_pricetable3 td {
padding: 10px;
}
/*Headerブロック*/
.cp_pricetable3 th {
position: relative;
z-index: 1;
width: 125px;
height: 50px;
text-align: center;
vertical-align: middle;
color: #ffffff;
border-radius: 5px 5px 0 0;
background: #88b7d5;
}
.cp_pricetable3 th:after {
font-family: 'FontAwesome';
font-size: 5em;
position: absolute;
z-index: -1;
right: 0;
bottom: -30px;
left: 0;
content: '\f0d7';
}
.cp_pricetable3 th.group1 {
background: #2e9b72;
}
.cp_pricetable3 th.group1:after {
color: #2e9b72;
}
.cp_pricetable3 th.group2 {
background: #da3c41;
}
.cp_pricetable3 th.group2:after {
color: #da3c41;
}
.cp_pricetable3 th.group3 {
background: #131874;
}
.cp_pricetable3 th.group3:after {
color: #131874;
}
/*メインブロック*/
.cp_pricetable3 tr td {
padding-top: 15px;
text-align: center;
border: none;
}
.cp_pricetable3 tr:last-child td {
border-radius: 0 0 5px 5px;
}
.cp_pricetable3 tr:nth-child(2n+1) td.group1 {
background: #8cd9bc;
}
.cp_pricetable3 tr:nth-child(2n+0) td.group1 {
background: #c3e4d8;
}
.cp_pricetable3 tr:nth-child(2n+1) td.group2 {
background: #f2c2c2;
}
.cp_pricetable3 tr:nth-child(2n+0) td.group2 {
background: #f7e1e1;
}
.cp_pricetable3 tr:nth-child(2n+1) td.group3 {
background: #a9bce2;
}
.cp_pricetable3 tr:nth-child(2n+0) td.group3 {
background: #d7e1f4;
}
/*ボタンデザイン*/
.cp_pricetable3 a.cp_btn {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
width: 100px;
margin-right: auto;
margin-left: auto;
padding: 0.3em 1em;
text-align: center;
text-decoration: none;
color: #ffffff;
border: 1px solid #da3c41;
border-radius: 4px;
background: #da3c41;
}
.cp_pricetable3 .cp_btn:after {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
width: 100%;
height: 0;
content: '';
transition: 0.3s;
-webkit-transform: translate(-50%,-50%) rotate(45deg);
transform: translate(-50%,-50%) rotate(45deg);
opacity: 0;
background: #ffffff;
}
.cp_pricetable3 .cp_btn:hover {
color: #da3c41;
}
.cp_pricetable3 .cp_btn:hover:after {
height: 250%;
opacity: 1;
}
.cp_pricetable3 .cp_btn:active:after {
height: 350%;
opacity: 1;
}