Nsryjdtyk

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.

It appears to be the border spacing on the table.

Apply this CSS to the table element:

border-spacing: 0;

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.