2番目のdiv/spanのテキストが十分に長い場合、最初のdiv/spanは上隅に留まります。しかし、2番目のdiv / spanに何もない場合、最初のdiv/spanはtdの真ん中にあります。
IE8を使用しています。
カレンダーのHTMLスニペット
<table id="calendar">
<thead>
<tr><th>April</th></tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thur</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<span>1</span>
</div>
<div>
<span></span>
</div>
</td>
<td>
<div>
<span>2</span>
</div>
<div>
<span></span>
</div>
</td>
<td>
<div>
<span>3</span>
</div>
<div>
<span></span>
</div>
</td>
<td>
<div>
<span>4</span>
</div>
<div>
<span></span>
</div>
</td>
<td>
<div>
<span>5</span>
</div>
<div>
<span></span>
</div>
</td>
<td>
<div>
<span>6</span>
</div>
<div>
<span></span>
</div>
</td>
<td>
<div>
<span>7</span>
</div>
<div>
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
カレンダーのCSS
#calendar {
border:2px solid black;
height:100%;
width:100%;
}
#calendar td {
border:2px solid black;
}
#calendar td > div:first-child {
text-align:left;
left: 0;
top: 0;
}
#calendar td > div:first-child > span{
text-align:left;
left: 0;
top: 0;
}
#calendar td > div + div {
clear:both;
text-align:center;
font-weight:bold;
white-space:normal;
}