slant table cells at a 30 degree angle and have text placed in them at a 30 degree angle off vertical

Posted on 2006-05-03
Last Modified: 2012-06-21
Hi Guys

Here's a tuff one for you - been looking for away around this for awhile, so it would be great if someone could come up with an answer not using images.

have a table with say 5 cells wide, 1 deep - need to angle the cells at a 30 degree angle to the right (slanted in other words) and poisition some text inside each cell at 30 degrees to the right of vertical. Don't know if it can be done with css or some combination of css and dhtml.

Kind regards

Question by:0pusID
    LVL 4

    Accepted Solution

    This is possible in CSS3, but no browsers support CSS3 yet, so your best bet is to simply use images.

    Here is a method that displays text at an angle, but it doesn't actually angle the letters:
    LVL 8

    Assisted Solution

    <table border="1" id="slanted_table">
    <tr><td><span>Hello</span></td><td><span>World</span></td><td><span>Text</span></td><td><span>Text</span></td><td><span>and Text.</span></td></tr>

    #slanted_table, #slanted_table td span { filter: progid:DXImageTransform.Microsoft.Matrix(m11=0.866,m12=-0.5,m21=0.5,m22=0.866,SizingMethod="auto expand"); }
    #slanted_table td span { width: 100%; height: 100%;}
    LVL 8

    Expert Comment

    The above solution uses the Matrix filter, which works only in IE.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now