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

Information Technology Professional with Two decades of SharePoint Experience.

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

  • September 4, 2020 at 2:37 AM

    CSS worked wonderfully, thanks!

    Reply
  • March 15, 2019 at 4:25 PM

    Thanks! CSS works like a charm!

    Reply

Leave a Reply