Use table-cell to fill rest of div - html

Question

I'm trying to make a table where the final column of the table fills the rest of the table.
I'm using divs to design the table and using the borders of the div to make the borders between each element, but if you look at my link http://subjectplanner.co.uk/Me/test.php, you can see that the last elements don't fill the end of the table resulting in the border falling short.
CSS
.Larger{
font-size: 125%;
}
.Smaller{
font-size: 85%;
}
.Block{
display: block;
}
.TodayList{
font-family:'Proxima Nova',Helvetica,Arial,sans-serif;
display:table;
width:100%;
margin:0 0 1em 0;
-webkit-border-radius:15px;
border-radius:15px;
overflow:hidden;
border:0 none;
border-collapse:collapse;
background-color:#247B2B;
font-size:1.5em;
position:relative;
padding:0;
}
.TodayItem{
position:relative;
display:table-row;
border-collapse:collapse;
overflow:hidden;
color:#70BB75;
-webkit-transition:background-color 0.2s linear;
-moz-transition:background-color 0.2s linear;
-o-transition:background-color 0.2s linear;
-ms-transition:background-color 0.2s linear;
transition:background-color 0.2s linear;
background-color:rgba(0,0,0,0.001);
}
.TodayItem:hover{
background-color:#95FA9D;
}
.TodayItem a{
color:#fff;
}
.TodayItem .smaller,.TodayItem .TodayInfo{
color:#fff;
}
.TodayItemWrapper{
display:block;
position:relative;
overflow:hidden;
height:100%;
width:100%;
}
.TodayIcon,.TodayTitle,.TodayInfo{
display:table-cell;
border-collapse:collapse;
border:1px solid #31AE33;
border-width:0 1px 1px 0;
padding:2em;
margin:0;
font-size:100%;
min-height:120px;
font-weight:normal;
}
.TodayItem:last-of-type .TodayIcon,.TodayItem:last-of-type .TodayTitle,.TodayItem:last-of-type .TodayInfo{
border-bottom-width:0;
}
.TodayIcon{
width:130px;
vertical-align:middle;
text-align:center;
}
.TodayTitle{
width:260px;
}
.TodayInfo{
border-right-width:0;
}
.TodayTitle a{
text-decoration:none;
}
.TodayTitle a:hover{
text-decoration:underline;
}
.TodayLink{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.001);
vertical-align:top;
z-index:2;
}
HTML
<ul class="TodayList">
<li class="TodayItem">
<div class="TodayItemWrapper">
<span class="TodayIcon"></span>
<h3 class="TodayTitle">
Monday<span class="TodayLink"></span> <span class="Block Smaller">You've 3 lessons today</span>
</h3>
<div class="TodayInfo">
<ul>
<li>9 - 10: Maths</li>
<li>10 - 11: English</li>
<li>12 - 13: ICT</li>
</ul>
</div>
</div>
</li>
<li class="TodayItem">
<div class="TodayItemWrapper">
<span class="TodayIcon"></span>
<h3 class="TodayTitle">
Tuesday<span class="TodayLink"></span> <span class="Block Smaller">You've 2 lessons on this day</span>
</h3>
<div class="TodayInfo">
<ul>
<li>10 - 11: Art</li>
<li>11 - 13: Double Business</li>
</ul>
</div>
</div>
</li>
</ul>
Here's a fiddle if you want it http://jsfiddle.net/tR7WX/

Answer 1

Simply add this rule to your style:
ul.TodayList>li:last-child {
width:100%;
}
Btw, you're not obliged to have a class for every level of tag. You can user CSS node rules to select specific tag and apply style. Should you go for it, you get a simpler (and lighter) HTML file.

Answer 2

Is there a specific reason why you're not using a table for this? I know tables are often seen as old school, but you've got table data here and scenario that requires table logic. I think to use DIVs and CSS to replicate tables would be complex and difficult to change/maintain and make it quite fragile.
Another possible solution would be to not use table-cell at all and instead use DIVs with percentage widths, so they always fill the total width. You could then have a container inside each DIV with display:table to vertically centre the content.
Sorry if I've misunderstood anything.