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:
- You can use CSS to hide column headers
- Use JavaScript/jQuery to Hide column headers
- 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.
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!
Thanks, how does this work in CSS if i only want to hide the headers of empty lists?
To hide the empty text in lists i use “.ms-list-emptyText-compact {display: none;}”
CSS worked wonderfully, thanks!
Thanks! CSS works like a charm!