[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


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
Medium Priority
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
  • 2

Accepted Solution

jfredrickson earned 1000 total points
ID: 16598754
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: http://jdstiles.com/java/angledtext2.html

Assisted Solution

KennyTM earned 1000 total points
ID: 16603640
<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%;}

Expert Comment

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

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month19 days, 22 hours left to enroll

872 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