CODEWITHSUNDEEP
htmlcss
unknown6656
unknown6656

Reputation: 2963

HTML: td not 100% table height

I've got the following problem:

I have a HTML <table>, which has a fixed height of 100px and no border. Inside this table, I've got one single row (100% height) and inside the row 5 td's (also with a height of 100%). Inside this td I have a div (position=relative, height=100%).

When I analyze the whole thing with the Chrome dev tool, I see, that the div's height is slightly smaller than the table. How can I set the div's height to be as great as the table?

I've already tried to set the cellpadding to -2px but it didn't work - I'm not really working with tables, so please forgive my lack of knoledge in this area :/

Thank you for your help

Edit: my source code:

<table>
    <tr>
        <td>
            <div>text 1</div>
        </td>
        <td>
            <div>text 1</div>
        </td>
        <td>
            <div>text 1</div>
        </td>
    </tr>
</table>

and the CSS:

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

tr,
td{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 200px;
}

td > div{
    padding: 0;
    margin: 0;
    position: relative;
    height: 100%;
    width: 100%;
}

Upvotes: 0

Views: 1011

Answers (1)

Darek Kay
Darek Kay

Reputation: 16649

You only need to set cellpadding and cellspacing to 0:

<table cellpadding="0" cellspacing="0">

See: http://jsfiddle.net/darekkay/bdej1qgw/

Upvotes: 1

Related Questions