CODEWITHSUNDEEP
jqueryimagehtml-tablerotationtransform
praveen
praveen

Reputation: 375

Rotating an image in a cell overlaps with the other cells in a table

<table  border = "1">
 <tr><td ><img id="cell1" src="http://farm8.staticflickr.com/7153/6852073179_00961ba267.jpg"></img>Cell 1</td ></tr>
<tr><td align="center">Cell 2<img id="cell2" src="https://www.google.com/images/srpr/logo3w.png"></img></td></tr>
<tr><td align="center">Cell 3</td></tr>
</table>

I want to show a rotated image in a table. I am using webkit-transform: rotate(90deg) to rotate the image to 90 deg. But when i rotate, the rotated image overlaps with the other cells in a table.

Click here for jsfiddle http://jsfiddle.net/5RF5W/

I want to expand/shrink the width & height of cell 2 based on the rotated image.

Upvotes: 3

Views: 303

Answers (1)

jammykam
jammykam

Reputation: 16990

You could set the height of the parent TD using jQuery:

$( ".rotated" ).each( function( index, element ){
    $(this).closest("td").height(this.width)
});

jsFiddle Demo

Upvotes: 3

Related Questions