Clever Geek Handbook

Why is my html table taking up more height than necessary?

I have a table with a bunch of the same image in one line. The image is 21 pixels high, but the table cells are rendered 25 pixels high (in chrome, safari and firefox).

There is nothing else in the table, and from what I can tell, there are no margins, borders or padding. So why is my desk higher than it should be?

Here's an example:

http://jsfiddle.net/q6zy17dz/

And here's a simple example of a table:

<table>
    <tbody>
        <tr>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td class="datetime"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
        </tr>
    </tbody>
</table>

Thank!

Bonus question: is there a way to recreate this layout without using a table (and also without using floats)? Thanks again!

+3


source to share


5 answers


By default, the image in the table gets the computed property display:table-cell

.



You must install img { display: block; }

+4


source


You can do it completely without tables.



body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

nav {
    background-color: skyblue;
    position: relative;
    text-align: center;
    line-height: 22px;
}

.left, .right {
    font-size: 0;
    position: absolute;
    top: 0;
}

.left { left: 0; }
.right { right: 0; }
      

        
        
        
      

    
<nav>
    <div class="left">
        <img src="http://i.imgur.com/b2f5t2B.png">
        <img src="http://i.imgur.com/b2f5t2B.png">
        <img src="http://i.imgur.com/b2f5t2B.png">
    </div>

    <div class="datetime">foo</div>
    
    <div class="right">
        <img src="http://i.imgur.com/b2f5t2B.png">
        <img src="http://i.imgur.com/b2f5t2B.png">
        <img src="http://i.imgur.com/b2f5t2B.png">
    </div>
</nav>
Run codeHide result


+2


source


Because the tag is <img>

displayed as an inline element, just like letters. Underneath there is a space below for descenders.

There are several ways to get rid of this space.

Adjust vertical alignment:

img {vertical-align:top;} /*or*/ img {vertical-align:middle;}

Or, set it as a block element:

img {display:block;}

Or, float (works in this case, but not recommended):

img {float:left;}
+1


source


This property line-height

makes the height <td>

25px. In your example, setting the value to 11px or less will force the cells to be 21px.

td { line-height:11px;}

Here is a jsfiddle .

0


source 


    <style type="text/css">
    td { border:solid 1px black; margin:0px; padding:0px; }
    </style>

<div>
<table>
        <tr>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td class="datetime">foo</td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
            <td><img src="http://i.imgur.com/b2f5t2B.png"></td>
        </tr>
</table>
</div>

<br>
<div>
        <span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
            <span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
            <span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
            <span class="datetime" style="float:left;">foo</span>
            <span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
            <span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
            <span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
</div>
-1


source






More articles:


All Articles