12

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?

Community
  • 1
  • 1
Jeaf Gilbert
  • 11,495
  • 19
  • 78
  • 105
  • You have a typo (`width10px;` should be `width:10px;`)... is that just in your question or is it like that in your code as well? – prodigitalson Sep 30 '10 at 07:06
  • Code removed here http://jsfiddle.net/hyNWy/. As you can see, the height of div fill out the browser not parent's row. – Jeaf Gilbert Sep 30 '10 at 07:47

2 Answers2

9

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.

Community
  • 1
  • 1
Eric
  • 95,302
  • 53
  • 242
  • 374
  • Code removed here http://jsfiddle.net/hyNWy/. As you can see, the height of div fill out the browser not parent's row. – Jeaf Gilbert Sep 30 '10 at 07:47
0

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.

Pops
  • 30,199
  • 37
  • 136
  • 151
Shikiryu
  • 10,180
  • 8
  • 49
  • 75
  • How about this http://jsfiddle.net/hyNWy/10/? The height I defined just example, not fixed. It should be fluid vertically. – Jeaf Gilbert Sep 30 '10 at 09:28
  • Not a big deal in this case, but link-only answers [are](http://meta.stackexchange.com/questions/65277/are-link-only-answers-poor-practice) [generally](http://meta.stackexchange.com/questions/72000/should-there-be-a-policy-about-one-link-only-answers) [discouraged](http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers). – Pops Nov 12 '11 at 23:55