Set table height expands upon inserting an equal height image

Question

I'm creating a header intended for mobile navigation. I decided to use a table, as this site has a responsive layout, and the last item in the table needs to have a dynamic width (and a table worked splendid for this).

However I have run into one last issue. For the first "home button" in the table (60x60), if I insert a 60x60 image into it, the height of the table increases from its set value of 60px, to something around 65~66px. When inspecting the table in a browser I cannot find what causes the extra height (no padding/margin/border/etc).

I've set up a fiddle that shows the behavior: http://jsfiddle.net/4QC8S/3/

HTML:

<div class="table">
    <div class="myimg"><img src="http://i.imgur.com/oxRzF30.png"></div>
    <div class="tablecell"><img src="twitter.png"></div>
    <div class="tablecell"><img src="youtube.png"></div>
    <div class="tablecell"><img src="apple.png"></div>
    <div class="tablecell"><img src="email.png"></div>
</div>

CSS:

.table {
    display:table;
    margin-right:auto;
    margin-left:auto;
    width:100%;
    height: 60px;
}

.tablecell {
    display:table-cell;
    text-align:center;
    border: 1px solid black;
}

.myimg {
    display:table-cell;
    text-align:center;
    border: 1px solid black;
    width: 60px;
}

If you change the first HTML table cell to have an invalid image like the other cells, the table will return to a height of 60px. The second you give it a valid image with a height of 60px, the table height expands.

Any ideas? I've read some things about tables possibly handling images oddly. Are there any workarounds? Any ways that I can force the table height to remain at 60px? I've tried embedding a block div in the cell that contained the image, and I tried changing the img properties in CSS to display:block with no dice. Thanks in advance for your time

Answer 1

Try to set a line-height:0; to the table item, it's ok if you use only images. If you use text, you will need new containers with a proper line-height

http://jsfiddle.net/NicoO/4QC8S/5/

.table {
    display:table;
    margin-right:auto;
    margin-left:auto;
    width:100%;
    height: 60px;
    line-height:0;
}