Quick and dirty CSS to display SharePoint column titles vertically

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.

About: Marijn

Marijn Somers (MVP) has over 14 years experience in the SharePoint world, starting out with SP2007. Over the years the focus has grown to Office 365, with a focus on collaboration and document management. He is a business consultant at Balestra and Principal Content Provider for "Mijn 365 Coach" that offers dutch employee video training. His main work tracks are around user adoption, training and coaching and governance. He is also not afraid to dig deeper in the technicalities with PowerShell, adaptive cards or custom formatting in lists and libraries. You can listen to him on the biweekly "Office 365 Distilled" podcast.

%d bloggers like this: