<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
.wrapper {
padding: 30px;
position: relative;
}
#list{
border-collapse: collapse;
width: 400px;
}
table#list thead th, table#list tfoot th{
width: 100px;
border: 1px solid rgb(121, 235, 56);
padding: 3px;
background-color: rgb(121, 235, 56);
}
table#list tbody td{
width: 100px;
border: 1px solid #CCCCCC;
padding: 3px;
}
table#list tbody tr:nth-child(odd){
background-color: rgb(179, 226, 80);
}
table#list tbody tr:nth-child(even){
background-color: rgb(189, 128, 109);
}
</style>
</head>
<body>
<div class="wrapper">
<table id="list">
<thead>
<tr>
<th>aaaa</th>
<th>bbbb</th>
<th>cccc</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3"><br /></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>テスト１</td>
<td>備考１</td>
</tr>
<tr>
<td>2</td>
<td>テスト２</td>
<td>備考２</td>
</tr>
<tr>
<td>3</td>
<td>テスト３</td>
<td>備考３</td>
</tr>
<tr>
<td>4</td>
<td>テスト４</td>
<td>備考４</td>
</tr>
<tr>
<td>5</td>
<td>テスト５</td>
<td>備考５</td>
</tr>
<tr>
<td>6</td>
<td>テスト６</td>
<td>備考６</td>
</tr>
<tr>
<td>7</td>
<td>テスト７</td>
<td>備考７</td>
</tr>
<tr>
<td>8</td>
<td>テスト８</td>
<td>備考８</td>
</tr>
<tr>
<td>9</td>
<td>テスト９</td>
<td>備考９</td>
</tr>
<tr>
<td>10</td>
<td>テスト１０</td>
<td>備考１０</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
