Positioning text in different CSS shapes - html

Question

Unfortunately I’m going slightly mad trying to align the “date” numbers over the CSS shapes. The problem I have is I would prefer a “universal” CSS number format for simplicity (the date is a displayed variable with a class applied to the td). I then change the CSS class for the underlying cell shape depending on its state to give it a background. All the PHP works to output the thing but some of the numbers align central to the cell, others are too low in the cell (mid height bottom) and two of them are off the page on at the top.
This is where I am up to (very simplified but illustrates the alignment problem in a table) – JSFiddle http://jsfiddle.net/xLWCH/
.daynumber {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000; font-weight: bold; position:absolute; display: table-cell; width:20px; vertical-align:middle; top:-9px; text-align: center; vertical-align: middle;}
.halfdaystart {position:relative; border-top: 20px solid green; border-right:20px solid red; font-size:0; line-height:0; width:0;}
.halfdayend {position:relative; border-top: 20px solid red; border-right:20px solid green; font-size:0; line-height:0; width:0;}
.booked {width:20px; height:20px; background:red;}
.Prohalfdaystart {position:relative; border-top:20px solid green; border-right:20px solid yellow; font-size:0; line-height:0; width:0;}
.Prohalfdayend {position:relative; border-top: 20px solid yellow; border-right:20px solid green;font-size:0; line-height:0; width:0;}
.Profree {width:20px; height:20px; background:yellow;}
.SBhalfdaystart {position:relative; border-top:20px solid red; border-right:20px solid green; width:0; height:0;}
.SBhalfdaystart:before {content: ''; display:block; position:relative; background:lightblue; height:5px; width:20px; top:-20px;}
.SBhalfdayend {position:relative; border-top:20px solid green; border-right:20px solid red; width:0; height:0;}
.SBhalfdayend:before { content: ''; display:block; position:relative; background:lightblue; height:5px; width:20px; top:-20px;}
.free {position:relative; width:20px; height:20px; background:green;}
.SBfree {position:relative; border-top:20px solid green; border-right:20px solid green; width:0; height:0;}
.SBfree:before { content: ''; display:block; position:absolute; background:lightblue; height:5px; width:20px; top:-20px;}
<table width="20" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Halfdaystart
<div class='halfdaystart'> <!-- or other corresponding class above -->
<table width="100%" cellpadding=0 cellspacing=0 border=0>
<tr>
<td align=center class="daynumber">1</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
What is the best way to do this? Can it be done with a one size fits all CSS or will I have to create a separate class for the text (applied to the td) as well depending on what I want to display as the div class that controls the shape? Basically is there a quick and easy way to do this?