I'm trying to show in a table some cells rotated, but in this example the columns has a white space. I would like to remove it, but I haven't accomplished how to remove it.
Here is the example:
Asked
Active
Viewed 594 times
2
-
By whitespace, do you mean the empty space as in item8 after rotation? – ASertacAkkaya Feb 12 '13 at 20:03
-
[**JSFiddle Hosted**](http://jsfiddle.net/PAfRY/) – mellamokb Feb 12 '13 at 20:03
-
@TheDeadLike that's right – Darf Zon Feb 12 '13 at 20:04
-
@DarfZon: Is there any reason you did not apply the `vertical` class to all of the relevant cells? For example: http://jsfiddle.net/PAfRY/1/ – mellamokb Feb 12 '13 at 20:05
-
Well, in my real application. I just need to apply the `vertical style` to all header cells – Darf Zon Feb 12 '13 at 20:07
1 Answers
1
Your function adds a div with height: width, width: height, however, since your table td inherits the widest cell's width, which in this case Dummy text, applies to the rotated cell item8 to have height of the auto-cell-width of Dummy text in horizontal.
You could just leave off the div as your table cell will already try to fit into it's content, or use display:table-cell on your div to do the same thing.
ASertacAkkaya
- 651
- 6
- 16
-
thank you, I've got it. Just one more question, how can I center the `vertical-align` to center in the rotated cell? – Darf Zon Feb 12 '13 at 20:39
-
Since the layout is rotated, but not reformed(meaning the former width will look as the height after rotation), perhaps `text-align:center` should do the trick. Also found this possible duplicate to what you're trying to accomplish: http://stackoverflow.com/questions/716970/rotating-table-header-text-with-css-transforms – ASertacAkkaya Feb 12 '13 at 21:23