Hide column titles from SharePoint lists and libraries with a small line of CSS

When you are building an intranet page (or some kind of publishing page) and you want to display content from a list or library you might want to hide the column titles in the lists or libraries. Those column titles bother me, if I have to be honest. If you are only showing 1 field (like a title), it is too obvious that the content shown there is the actual title.

Let me give you an example, because a picture is worth more than a huge amount of poorly written English text:

column titles shown
column titles shown

On this page, we have a links list and some announcements. Notice the “url” and “title” column titles. It is logical that we show links in the links list, don’t you think?

A quick way to hide all those column titles is with following style code. You can enter it in a content editor or script webpart. Don’t forget to hide the webpart so you leave no trace!


<style>
         .ms-viewheadertr { display: none;}
</style>

What this CSS code does is take the .ms-viewheadertr class, which is the one that is responsible for the column title layout, and hide it.

Doesn’t this look much prettier? It is more minimalistic and hides the column title which is not useful here.

no column titles
no column titles

This code works in SharePoint 2010 and SharePoint 2013, not tested in SharePoint 2007 but I am quite sure it will work there as well.

An alternative to this small piece of code is working with a “content query webpart” where you can design the whole thing yourself. This is ofcourse more work than adding this small piece of CSS code, but if you need to display the content on a lot of pages, a CQWP would be more useful. Decide for yourself or consult the SharePoint Champion in your organisation if you are not sure.

About: Marijn

Marijn Somers (MVP) has over 12 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.


One thought on “Hide column titles from SharePoint lists and libraries with a small line of CSS”

Leave a Reply

%d bloggers like this: