게시판 css

<table class="ex1">
<caption>4.12 가계부</caption>
<thead>
<tr>
<th scope="col">분류</th><th scope="col">날짜</th><th scope="col">내용</th>
<th scope="col">수입</th><th scope="col">지출</th><th scope="col">합계</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">일일 합계</th><td colspan="3">235,670원</td><td>231,600원</td><td>4,070원</td>
</tr>
</tfoot>
<tbody>
<tr class="odd">
<th scope="row">기타</th><td class="date1">4/12</td><td class="desc">이전 잔액 - 4/11에서 넘어옴</td>
<td>40,000원</td><td></td><td>40,000원</td>
</tr>
<tr>
<th scope="row">교통비</th><td class="date1">4/12</td><td class="desc">차비 - 지하철 + 버스</td>
<td></td><td>3,000원</td><td>37,000원</td>
</tr>
<tr class="odd">
<th scope="row">식비</th><td class="date1">4/12</td><td class="desc">산채 비빔밥 - 맛있는 식당</td>
<td></td><td>8,000원</td><td>29,000원</td>
</tr>
<tr>
<th scope="row">기타</th><td class="date1">4/12</td><td class="desc">복권 당첨 - 앗싸 로또!</td>
<td>45,670원</td><td></td><td>74,670원</td>
</tr>
<tr class="odd">
<th scope="row">유흥비</th><td class="date1">4/12</td><td class="desc">당구장 - 장전동 ○○ 당구장</td>
<td></td><td>16,000원</td><td>58,670원</td>
</tr>
<tr>
<th scope="row">지식/ 교양</th><td class="date1">4/12</td><td class="desc">소설책 구매 - 셜록 홈즈 Best</td>
<td></td><td>12,000원</td><td>46,670원</td>
</tr>
<tr class="odd">
<th scope="row">식비</th><td class="date1">4/12</td><td class="desc">콩 다방 커피 - 카페 모카</td>
<td></td><td>5,000원</td><td>41,670원</td>
</tr>
<tr>
<th scope="row">기타</th><td class="date1">4/12</td><td class="desc">출금 - 우리 은행</td>
<td>150,000원</td><td></td><td>191,670원</td>
</tr>
<tr class="odd">
<th scope="row">식비</th><td class="date1">4/12</td><td class="desc">스테이크 - ☆☆ 스테이크</td>
<td></td><td>99,000원</td><td>92,670원</td>
</tr>
<tr>
<th scope="row">유흥비</th><td class="date1">4/12</td><td class="desc">와인 바 - Robert Mondavi, Merlot</td>
<td></td><td>80,000원</td><td>12,670원</td>
</tr>
<tr class="odd">
<th scope="row">차비</th><td class="date1">4/12</td><td class="desc">택시비 - 와인바에서 우리 집까지</td>
<td></td><td>8,600원</td><td>4,070원</td>
</tr>
</tbody>
</table>





table.ex1 {width:98%; margin:0 auto; text-align:right; border-collapse:collapse}
.ex1 th, .ex1 td {padding:5px 10px}
.ex1 caption {font-weight:700; font-size:20px; padding:5px; color:#1BA6B2; text-align:left; margin-bottom:5px}
.ex1 thead th {background:#ABC668; color:#fff; text-align:center; border-right:1px solid #fff}
.ex1 tbody th {text-align:left; width:12%}
.ex1 tbody td.date1 {text-align:center; width:8%}
.ex1 tbody td.desc {text-align:left; width:35%}
.ex1 tbody tr.odd {background:#f9f9f9}
.ex1 tbody tr.odd th {background:#f2f2f2}
.ex1 tbody tr:hover {background:#F3F5BB}
.ex1 tbody tr:hover th {background:#F2F684; color:#1BA6B2}
.ex1 tfoot tr {border-top:6px solid #E9F7F6; color:#1BA6B2}
.ex1 tfoot th {text-align:left; padding-left:10px}