CODEWITHSUNDEEP
css
Jeaf Gilbert
Jeaf Gilbert

Reputation: 11981

Full height div inside td

I want to achieve this thing: alt text

Height of table row and grey line should be dynamic depend on contents in right column.

I've read in How to make <div> fill <td> height, so I tried with this http://jsfiddle.net/hyNWy/

But still no luck. Any suggestions?

Upvotes: 12

Views: 19111

Answers (2)

Shikiryu
Shikiryu

Reputation: 10219

Did you try

<table>
    <tr>
        <td>
            <div>
            </div>
        </td>
    </tr>
</table>

with

tr {  }
td { position:relative;height:300px; display:block; }
div {
    width:10px;
    position:absolute;
    bottom:10px;
    top:10px;
    display:block;
    background:grey
}

Here's a jsfiddle of that.

Upvotes: 0

Eric
Eric

Reputation: 97591

With a colon? Also, to get your spacing:

<td style="position:relative;">
    <div style="width: 10px; position:absolute; top:10px; bottom:10px; background:grey">
    </div>
</td>

EDIT:

I don't think it's possible without specifying an explicit height. The solution in the original question that you pointed to does not actually work. position:relative does not seem to apply correctly to table cells. This could well be intentional and part of the spec.

Upvotes: 9

Related Questions