Tuesday, July 17, 2012

Hide SharePoint List Header

When placing a SharePoint list on a webpage, by default it includes the column headers. Normally, this is great because you can then sort and filter the data in each column. However, in some instances it just doesn't make sense.
On my website we have a lot of FAQs and we put the questions/answers in a SharePoint list. When you place that list on the webpage, you get the column header, but since there are only two columns in the list, it's pretty obvious which is which. Furthermore, the sorting and filtering capability isn't really necessary.

THE BEFORE

The nature of this list makes the column headers look odd and out of place.

Sorting and filtering options just are necessary for a list like this.

 
By adding a Content Editor Web Part to your page and putting the following CSS in the HTML you can hide the column headers on the page.

<style>
TR.ms-viewheadertr > TH.ms-vh2 {
DISPLAY: none
}
</style>

THE AFTER
They are gone!

3 comments:

  1. Hey Jodi,

    Nice use of screen shots and labels to illustrate an issue that would have been very difficult to explain just using text.

    -Barry

    ReplyDelete
  2. I was able to follow the concept by looking a the screen shots. Thanks for the information. I definitely need to learn SharePoint.
    Debbie Kosydar

    ReplyDelete
  3. Your screen shots and descriptions do a good job of explaining this concept. Great job!

    ReplyDelete