SharePoint: Hide List and Library Column Headings

 

Updated 1/13/2012 with notes for SharePoint 2010

A 2013 version of this article is available here: http://techtrainingnotes.blogspot.com/2015/07/sharepoint-2013-hide-list-and-library.html

I had a request for hiding the column headings of a list displayed in a web part. First thought was the toolbar, but they were asking about the clickable column headings. I think they were wanting to make a page look more like a regular web page instead a page full of lists. By the way this makes for a better way to display a view with only one column…

Note: This will of course remove the ability of the site visitor to sort and filter the web part.

Note: This will also work right in the view page (view pages use web parts!), but in SharePoint 2010 adding a web part to a view page will change how the ribbon gets displayed and will remove the View dropdown menu from the title area crumb trail.

 

Before (2007):

After (2007):

 

Before (2010):

After (2010):

Note: after this customization the checkbox column disappears, at least until you mouse over a document. Bug? I think it’s a bonus!

 

Steps:

• Add your web part for the list to a page
• For a minimal look set the toolbars to “none”
• Below this web part add a Content Editor Web Part (CEWP)
  • Modify the CEWP and use the Source Editor button
  • Copy an paste the JavaScript below
  • If the CEWP displays it’s title bar then in the Appearance section set the Chrome to “none”
• Or (preferred for SP 2010 other than view pages)
  • Copy the JavaScript to a Notepad file (name it something like “HideHeading.html”) and upload this file to a library
  • In the library where you uploaded this file, right-click this file and copy it’s shortcut / url
  • Below your web part add a Content Editor Web Part (CEWP)
  • Modify the CEWP and paste the URL copied above into the Content Link box
  • Save your changes
• Or (for SharePoint view pages)
  • Edit the view page in SharePoint Designer
  • Copy and paste the Javascript to just before the end tag for PlaceHolderMain (just before </asp:Content>)
• If you want to hide the column headings of multiple web part modify the IF statement like this Three web parts

Web part summary name!

In SharePoint 2007, the summary name is usually just the list’s name: “Shared Documents”.

In SharePoint 2010, the summary name is usually the list’s name PLUS the list’s description. For example the default for Shared Documents is: “Shared Documents Share a document with the team by adding it to this document library.”  (including the period)

To find the correct name use your browser’s View Source option to display the HTML of the page and search for “summary=” and copy the text that follows.

    <table summary="Shared Documents Share a document with the team by adding it to this document library."

The JavaScript

 

Need to change multiple web parts?

Two web parts:
             if (x(i).summary=="Tasks" | x(i).summary=="Shared Documents"
Three web parts:
             if (x(i).summary=="Tasks" | x(i).summary=="Links" | x(i).summary=="Shared Documents"

The JavaScript

<script type="text/javascript">
// CEWP trick from techtrainingnotes.blogspot.com!
// techtrainingnotes.blogspot.com/2009/06/sharepoint-hide-list-and-library-column.html
// Hide column headings in web parts

//Find the list  (change "Shared Documents" to your web part's name)
var x = document.getElementsByTagName("TABLE"); // find all of the Tables 
  var i;
  var y;
  for (i=0;i<x.length;i++) 
  {
    if (x[i].summary=="Shared Documents")  //find the table with this name
    {
      y = x[i].getElementsByTagName("TR");
      y[0].style.display="none";  //hide the first row
    } 
  }
</script>

 

 

.