Different 100% height of table in Chrome/IE and FireFox - html

Question

The problem is, that all of elements (main container, table container and table itself) must have 100% height. Table itself has slightly smaller size in Chrome and IE, than in Firefox, which causes a small gap between .table-container and table borders.
Do somebody know how to fix this? I've spent almost all day for this, and can't simply find a solution. Would be grateful for any help.
Here is a link for fiddle with my current problem: fiddle link
<div class="container">
<div class="buttons">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
<td>dd</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
</tr>
</tbody>
</table>
</div>
</div>
and CSS:
html, body, .container, .table-container, table
{
height: 100%;
}
.container
{
display: block;
width: 500px;
margin: 0 auto;
text-align: center;
}
.table-container
{
width: 100%;
border: 1px solid red;
padding-top: 30px;
margin-top: -30px;
}
.buttons
{
height: 30px;
}
.buttons div
{
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 25%;
float: left;
height: 30px;
border: 1px solid black;
}
table
{
border: 1px solid black;
width: 100%;
border-spacing: 0;
}
thead td, tbody td
{
width: 25%;
height: 25%;
}
Update: added padding and negative margin for .table-container
Update2: added border-spacing and border-collapse to an example. Still not working properly.
Update3: Now it works here, which means, that i couldn't fully reproduce my bug to show it to you :( But in general, the problem is, that the height of 5x5 table in Chrome is less from FF on 22px, which is 22px gap between table container and a table itself. Each cell has around 4px + to table height in Firefox.

Answer 1

It appears to be the border spacing on the table.
Apply this CSS to the table element:
border-spacing: 0;

Answer 2

Be aware that
width: 100%;
does not work the exactly the same way as
height: 100%;
does.
While width: 100% grabs 100% of the parent's width even if there has not been an explicit setting of that width, height: 100% works only on elements whose parents have a fixed height.
Simply speaking, %-width applies dynamically, while %-height applies to static parents container's heights.

Answer 3

I came here because I was having the same problems with different 100% height of table for Chrome and Firefox. The fix is to add a border the table. You can just add border-bottom as well and it won't actually show up in Chrome, but will fix the height issue.
table
{
**border-bottom: 1px solid black;**
width: 100%;
border-spacing: 0;
}