Geeks With Blogs
Thanigainathan Siranjeevi Sharing my learning

We had a scenario where there's a necessity to display the column headers vertically. Usually the headers will be horizontals by default. Below picture shows the default headers.

The needed ouput was displayed below.

The Grid control that is used for this display is GridView. So I did a little bit of search and found some good solutions in the web. It's all achievable with styles.

Step 1:

Create the following styles in the Master page file or the Style class file or in the page where required.

<style type="text/css">

.VertiColumn th {

writing-mode: tb-rl;

filter: fliph() flipV();



Writing-Mode defines how the text has to be written. Once style is given the header will come from top to bottom but in reverse order. In the above example StratDate will be shown from top to bottom. But I need to display them from bottom to top. Hence I used fliph() and flipv(). These styles flip the text horizontally and vertically giving the bottom to top text.

Then define the class for the Grid control's header. I am defining them for the GridView here.

That's it you can get the Vertical column's easily.


For now these styles are supported in IE alone. I have not tested this in other browsers.


Thanigainathan Siranjeevi

Posted on Thursday, May 21, 2009 8:59 PM | Back to top

Comments on this post: Vertical Column Headers

# How to reduce the width of the above grid view
Requesting Gravatar...
Please can u help me,
i am using column headers vertically but how to reduce the size of the Header width
Left by Latha on Mar 24, 2010 7:07 AM

# re: Vertical Column Headers
Requesting Gravatar...
Hello Sir,
Thank you for the Solution, but I am still having problem with the browsers. I must show this grid in every browser so, please if u have got some solution on that, please share it with me, I would be very thankful to you.

Left by Goraksh on Aug 05, 2013 1:14 AM

Your comment:
 (will show your gravatar)

Copyright © thanigai | Powered by: