How to Hide Column Headers in SharePoint List View Web Parts using CSS, jQuery?

I was looking for some ways to hide SharePoint list view column headers today. Here are my findings:

  1. You can use CSS to hide column headers
  2. Use JavaScript/jQuery to Hide column headers
  3. You can edit the page in SharePoint designer and remove column headers

Hide Column Headers of All List View using CSS in SharePoint 2010-2013-2016:
Insert a CEWP just below your list view web part, and place this code in it.

<style type="text/css">
tr.ms-viewheadertr 
{ 
    display: none 
}
</style>

This will hide all list view web part headers.

Hide Column Headers in List View Web Parts

The headers of your web part should now be hidden. The above code hides the headers of every web part on the page. It’s helpful when the page contains a web part using boxed style list views.

You can also hide specific web part’s header using this CSS:

#WebPartWPQxxxx .ms-viewheadertr 
{ 
    display: none 
}

Where xxxx is the web part ID. Use IE Toolbar/Firebug to find it.

jQuery to find and Hide specific Web Part Headers:

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $("table[summary='LIST NAME'] tr:eq(0)").hide();
});
</script>

Don’t forget to change the LIST NAME in the above code!

Salaudeen Rajack

Salaudeen Rajack - SharePoint Expert with Two decades of SharePoint Experience. Love to Share my knowledge and experience with the SharePoint community, through real-time articles!

2 thoughts on “How to Hide Column Headers in SharePoint List View Web Parts using CSS, jQuery?

  • CSS worked wonderfully, thanks!

    Reply
  • Thanks! CSS works like a charm!

    Reply

Leave a Reply

Your email address will not be published.