CODEWITHSUNDEEP
htmlcss
Jeffrey Lott
Jeffrey Lott

Reputation: 7409

How can I rotate the content of a cell without changing the layout of the table

I'm currently working on a UI that requires that I have a table with cells whose text is read vertically instead of horizontally. To do this, I am using CSS rotate transforms.

The problem I am running into is that the content is being measured before the render transform is taking place. This is causing my table to render incorrectly, giving wide columns instead of narrow ones.

Is there any way to fix this behavior with either css or javascript?

JSFiddle

Upvotes: 1

Views: 115

Answers (2)

Belladonna
Belladonna

Reputation: 3862

Not the best solution, but here's what I came up with: http://jsfiddle.net/gJCtN/2/

Also, vertical-align is not supported by elements without display:table-cell or something like it. More info.

Upvotes: 1

Miro
Miro

Reputation: 8650

Check this out: http://jsfiddle.net/c29rr/

I don't know if it will work in your case since it uses float:left to make the cells behave as divs but it's a start.

Upvotes: 2

Related Questions