Bottom border of table won't show - html

Question

I'm trying to get a table to show on my WP site and I'm just learning CSS, but when I create what I think should be right doesn't come out right. Only the outer right, left, and top border show.
.front {
border: 2px solid red;
}
I put that in the table class. I also tried adding another bottom-border, even by itself, nothing. Here's my table code, very simple. Just trying to learn to use CSS.
<table class="front">
<tbody>
<tr>
<td>test.</td>
<td>test.</td>
</tr>
<tr>
<td colspan="2">test.</td>
</tr>
</tbody>
</table>
I searched on here and tried this, but doesn't work (there were others things I found on here, but this one I remember):
table {
border-collapse: separate;
}
I should note that I use a CSS plugin to make it easier for me to add it to CSS. Haven't used it much, a simple hide which works fine. Not sure if this could have something to do with it, just some extra info that may help.

Answer 1

The problem is probably the height of the table or the container in which is placed.
Look at this fiddle and try setting the height of the table to 100% like this:
.front {
border: 2px solid red;
height: 100%;
}

Answer 2

Just apply the following CSS accordingly; this will fix your issue:
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
The problem is with the "box-size" being "100%", so the borders are pushed further. If you apply the CSS properties above to such elements, you won't have to face such issues.
Edit:
This will work on elements that span across the full width (-or full height) inside another.
So, it will work like this with either "width" or "height", but here's both:
CSS:
.spanBox
{
width:100%;
height:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.redBorder
{
border: 2px solid red;
}
HTML:
<table class="spanBox redBorder"><tr><td>...</td></tr></table>