带有溢出的表格单元：隐藏且绝对定位的元素

Question

I have this classic <td> which has the style attribute overflow: hidden set. Inside the cell, I've put a <div> with position: relative , and inside the block there are absolutely positioned large images that I want to be clipped to the boundaries of the cell. Meaningful example:

...
<td style="overflow: hidden;">
    <div style="position: relative;">
        <img style="position: absolute; left: 0px; top: 50%;" src="verylargeimage.png" />
    </div>
</td>
...

It seems to work fine in IE8, IE9, Firefox and Opera, but it fails on Chrome: the image spans over the boundaries of the cell.

I have the same behaviour when I print the page in IE.

I'm aware that the overflow attribute on table cells isn't well defined. Is there any way to obtain the desired effect without using background images? The result must be printable.

UPDATE I don't want to use Javascript either. I want it to be my last resort.

Answer 1

overflow : hidden has a meaning - which is hide everything which is going out of "defined" area. which means you will need to define what will be your width / height or both will be and it will hide anything which des not fit there.

Answer 2

Try using table-layout:fixed on the table element and defined width/height on the td . It stops the layout engine from trying to adjust the table cells based on their contents. It's still not gaurenteed to work but it's your best shot. Frankly though I don't think it can really be done.

I should point out that overflow on table cells is actually well-defined - the standard specifically doesn't support it. What you're doing is a hack.

Answer 3

You may want to make use of the CSS Clip property and it is not even CSS3. Looks like it fits in your kind of situation.

The clip property is like a mask. It allows you to mask the content of an element in a rectangle shape.

Check this link below and read the CSS Clip part. http://webdesignerwall.com/tutorials/5-simple-but-useful-css-properties