Need Help with Rotating a Table

[Jim Weinberg]

I have a table with 3 cells and 3 rows. The middle cell crosses the 3 rows (i.e. rowspan=3). In that cell is a table that I want to rotate 90 degrees. It has one cell containing two lines of text. Here's the CSS I'm using:



#rotate {
-moz-transform: rotate(90.0deg); /* FF3.5+ */
-o-transform: rotate(90.0deg); /* Opera 10.5 */
-webkit-transform: rotate(90.0deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */


and here's the table code:


<td rowspan=3 valign="top">
<table style="border-style:dashed" id="rotate">
<tr>
<td><u>TRAY CHECK-IN </u> Your Entrant No. will be assigned at Tray check-In. Please have your List of Entries and Tray Slips
<br>completely filled out with <b>exact</b> monies ($1.00 each slip)at time of check-in. Enjoy the Competition!
</td>
</tr>
</table>
</td>


The table rotates correctly, but doesn't expand to fill up the containing cell.

Can anyone tell me what to add to my CSS to have the table expand properly?

Thanks.

[Beverleyh]

Transforms don't actually change an element's position in the DOM or affect the position/flow of other elements - they won't flow to fill the table cell in this case. Any change to a transformed element is only visual.

What you might want here is "writing-mode" to change the orientation of a table cell's contents http://www.w3.org/TR/2001/WD-css3-text-20010517/#PrimaryTextAdvanceDirection (you can Google for more info)

[Jim Weinberg]

Hi Beverley. Thanks for the reply. I checked out the reference. Interesting construct. I'd never heard of it. I played around with it a bit and got the table and text rotated the way I wanted. The only problem now is that the table is on the right side of the cell, up against the right most cell. I can shift it from right to left, but can't get it centered. Turns out that rotating the table that way changes the whole perspective thing. I'm beginning to think that the easiest solution is to create the table as a graphic and just use an img tag in the cell. I know it's not the most elegant solution, but it will work.

Again, thanks for your help. Best regards,
Jim