Open MagicVox.net
今更目新しいこともありませんが、TABLEで作られたカレンダーをCSSで装飾してみるテスト。
<style>
.calendar table {
border-bottom: solid 1px black;
border-right: solid 1px black;
}
.calendar th {
color: #fff;
background-color: pink;
width: 40px;
border-top: solid 1px black;
border-left: solid 1px black;
}
.calendar td {
color: #000;
background-color: #eee;
border-top: solid 1px black;
border-left: solid 1px black;
text-align: center;
}
.calendar a {
color: red;
background-color: #ddd;
display: block; /* ここがミソ？ */
}
.calendar a:hover {
background-color: #fff;
}
</style>
<div class="calendar">
<table cellpadding="0" cellspacing="0">
<caption>2007 Apr.</caption>
<tr>
<th>M</th><th>Tu</th><th>W</th><th>Th</th><th>F</th><th>Sa</th><th>Su</th>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td>1</td>
</tr>
<tr>
<td>2</td><td>3</td><td><a href="#">4</a></td><td>5</td><td>6</td><td>7</td><td>8</td>
</tr>
<tr>
<td>9</td><td>10</td><td>11</td><td>12</td><td>…</td><td>…</td><td>…</td>
</tr>
</table>
<!--calendar--></div>
Windows XP の Firefox、Opera、Netscapeであれば、枠内ならリンクが反応するものの、IEでは文字の上にカーソルを持っていかないとオンマウス判定されないみたいです。
English