CODEWITHSUNDEEP
htmlhtml-tablerow
Thom
Thom

Reputation: 371

How to adjust table row height in HTML5

I've looked through the site, and haven't been able to find anything that addresses this particular question as it relates to html5. Though it's always possible I overlooked it... How do I get a row height of 1px in a table using html5? The following code works as expected in html 4.01 (I've thrown in everything including the kitchen sink in an attempt to get the row height to be just 1px in html5, with background colors added to show the table row):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>
<body style="background-color:#F3F3F3;">
    <table style='width:500px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; margin:0px;'>
        <tr style="line-height:1px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; height:1px; margin:0px; max-height:1px;">
            <td style="background-color:red; line-height:1px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; height:1px; margin:0px; max-height:1px;">
                <img style="width:100%; height:1px;" src="/images/pixsolid.gif" alt=''>
            </td>
        </tr>
    </table>
</body></html>

It displays as you would expect, as a 1 pixel high row.

But if I use the identical code with a doctype of:

<!DOCTYPE html>

It displays as a 6 pixel tall row... The top 5 pixels with the background color of red, and then the 1 pixel high image line. (I would have posted actual images, but I'm new here, and StackOverflow won't let newbies post images.)

The problem appears identical in the latest versions of Firefox, Chrome, & IE, so I expect I'm missing something...

Any suggestions would be much appreciated.

Upvotes: 10

Views: 29545

Answers (3)

Martron
Martron

Reputation: 1

I had the same problem today, after switching an old application to HTML5. There are thousands of occurences of transparent images (trans.gif) within table cells and the img height attribute used to define the tr height.

I wrote a little jQuery based javascript function which is executed on docReady and it works fine for me. Maybe you'll have to adjust it to your needs (e.g. image name):

function fixTransGifHeight()
{
    // HTML5 td height is oriented on font-size, now
    var src;
    var height;
    var parent;
    $('img').each(function() {
        src = $(this).attr('src').toUpperCase();
        height = parseInt($(this).attr('height'));

        if(src.indexOf('TRANS.GIF') > -1) {
            parent = $(this).parent();
            if(parent.is('td')) {
                parent.css('line-height', height + 'px');
                parent.css('font-size', height + 'px');
            }
        }
    });
}

Upvotes: 0

Frank S.
Frank S.

Reputation: 91

I had the same problem with an HTML table containing only images. After changing the doctype to HTML 5, Chrome, Firefox and IE displayed the table cells with a height larger than the image whereas before the cells were just as big as the images they contained.

It seems that for HTML 5 the browsers will size the table cells no smaller than your font-size and line-height would allow for text content. So to achieve the same look as before I used the following inline CSS rules: 

<table style="font-size: 1px; line-height: 0;">
...
</table>

Upvotes: 9

cegfault
cegfault

Reputation: 6632

Have you tried removing all the extra inline CSS and trying it that way?

Also, see this question

Anyway, you're changing from HTML 4 transitional doctype to HTML 5, so you can probably find your answer in the HTML5 specs.

But, if you don't want to do a lot of reading, here's some advise: I've seen people have success with using em instead of px. Your issue is that some situations the line-height will not display the same in HTML5 as it did in 4-transitional. Try removing all your inline CSS (and, preferably, add a stylesheet!!), then slowly adding in and playing with the padding, etc, may reveal your problem.

Upvotes: 1

Related Questions