Getting TD cell width to wrap around div with specified width %

Question

Here's my current HTML / CSS: http://jsfiddle.net/S8Bne/

And here's a screenshot that annotates what I'd like to try to do:

Basically, I'd like the width of the parent TD to dynamically wrap based on the width of the nested div. Is this possible?

Answer 1

Well...as Sheepy pointed out, what you are asking does not seem to make sense, initially. But if you really want to make the TD adjust with the inner DIV, you will need to do some JavaScript...

Say, you have the following table cell:

<td rowspan="4" id="tdwrap"> <div id="divwrap">...</div></td>

You could have the following javascript calls:

// set cell width to its inner div width (in pixel)
$('#tdwrap').width($('#divwrap').width());

// set the div width back to its parent cell width (in pixel)
$('#divwrap').width($('#tdwrap').width());

And then, you can set the width of the div:

#divwrap {
    width: 30%;
}

This way, you can let the cell width to adjust to its inner div's width, which is based on its parent cell's width! :p

Example: http://jsfiddle.net/william/S8Bne/89/

Note that I have used the jQuery library in the code snippet.

Is this what you are after?