Quick and dirty CSS to display SharePoint column titles vertically

March 12th, 2013 | Posted by Marijn in code | css | customization | design | quick tip | sharepoint | sharepoint 2010 | usability

At a client we have a very large list with over 40 columns. Needless to say, they don’t all fit into 1 window. You have to scroll a lot to the right to see all columns. While the list column titles are very large, the actual data is a very small code. That means we have a lot of white space that is unused. We came up with a way to display SharePoint column titles vertically!

original width

test list with normal column headers

I wrote a quick and dirty CSS to put those large column titles vertically and to decrease the width, so all columns are shown on the same page.

vertical headers

vertical headers take up less width

Code

<style type="text/css">
.ms-vh2 {
WRITING-MODE: tb-rl; -moz-transform: rotate(90deg);
width:10px;
}
.ms-viewheadertr {
HEIGHT: 240px;
}</style>

Remarks on display SharePoint column titles vertically

Some remarks have to be made here: this code was quick and dirty and will not always work nor is it thoroughly tested. It just works for the client on that list. It also doesn’t work on complex fields like the “people and groups” field.

Some additions could be made (but I don’t have time or skill to do them) to make the columns alternating, so visibility would improve.

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

Leave a Reply

%d bloggers like this: