Friday, January 2, 2015

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 headers of every web part in the page. Its helpful when the page contains a web part using with 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!



You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.
*Sponsored


Check out these SharePoint products:

No comments :

Post a Comment

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...