CODEWITHSUNDEEP
htmlcsshtml-table
rjcarr
rjcarr

Reputation: 2091

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

I have a table with a bunch of the same image in a single row. The image has a height of 21px but the cells of the table have a rendered height of 25px (in Chrome, Safari, and Firefox).

There's nothing else in the table, and from what I can tell, there are no margins, borders, or padding. So why is my table taller than it needs to be?

Here's an example:

http://jsfiddle.net/q6zy17dz/

And here's a simple example of the 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>

Bonus question: Is there a way to recreate this layout without using a table (and also without using floats)?

Upvotes: 6

Views: 3410

Answers (5)

Stickers
Stickers

Reputation: 78676

Because the <img> tag is rendered like an inline element, similarly to letters. There is space below it is for the descenders.

There are few ways to get rid of that space.

Adjust the vertical alignment:

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

Or, set it as a block element:

img {display:block;}

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

img {float:left;}

Upvotes: 1

Rachel Cantor
Rachel Cantor

Reputation: 336

By default, an image within a table gets the computed display:table-cell property.

You should set img { display: block; }

Upvotes: 7

recursive
recursive

Reputation: 86064

You can do it entirely 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>

Upvotes: 3

Tasos K.
Tasos K.

Reputation: 8079

It is the line-height property that makes the height of <td> to be 25px. In your example setting a value of 11px or less will make the cells have 21px. 

td { line-height:11px;}

Here is jsfiddle.

Upvotes: 1

jobeard
jobeard

Reputation: 129

    <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>

Upvotes: -1

Related Questions