Menu
I want to achieve this thing:
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?
486
If you give your TD a height of 1px, then the child div would have a heighted parent to calculate it's % from. Because your contents would be larger then 1px, the td would automatically grow, as would the div. Kinda a garbage hack, but I bet it would work. Show activity on this post.
For this to work, the <td> must have an explicit height set. */ height: 100%; } .thatSetsABackgroundWithAnIcon .theIcon { position: absolute; bottom: 0; right: 0; } If you keep the <div> as a child of the <td>, this snippet of jQuery will properly set its height:
How to Make a <div> Fill the Height of the Remaining Space 1. The most usual solution to this problem is to use Flexbox. Let’s see how to use it. For this method, we’ll need the... 2. Another way of making a <div> fill the remaining space is to use the CSS position property. Just set the position ...
There is 10px padding between the TD and the div. If I assign a BG image to the TD, I couldn’t create this ‘whitespace’ could I?
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>
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.
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
