Results 1 to 3 of 3

Thread: Need Help with Rotating a Table

  1. #1
    Join Date
    Jan 2006
    Posts
    170
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default Need Help with Rotating a Table

    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:

    Code:
    #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:
    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.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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-te...vanceDirection (you can Google for more info)
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Jan 2006
    Posts
    170
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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

Similar Threads

  1. Resolved 3D Rotating Carousel
    By BorderTerroir in forum JavaScript
    Replies: 6
    Last Post: 05-29-2015, 09:45 AM
  2. Rotating Banners
    By trackermo in forum Looking for such a script or service
    Replies: 0
    Last Post: 08-13-2009, 07:50 PM
  3. rotating image
    By sketchin13 in forum Looking for such a script or service
    Replies: 1
    Last Post: 06-23-2007, 05:26 PM
  4. Rotating banner
    By wentwooddownhill in forum CSS
    Replies: 4
    Last Post: 06-11-2007, 03:49 PM
  5. rotating table bg-color
    By jonsey in forum CSS
    Replies: 0
    Last Post: 02-12-2007, 07:00 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •