Below you can see the list with the list column headers showing.
Add CSS, Javascript Or JQuery To The Page Using A Content Editor Web Part
1: Add a Content Editor Web Part (CEWP) to the page.
Move it below the list view web part, otherwise the Javascript and JQuery won’t work, and also your list will loose the ribbon.
The code will be added to this web part.
Remember that view pages are still just web part pages, and you can edit the page.
2: Click in the web part, and in the ribbon click
HTML and then
Edit HTML Source.
3: Add either the CSS, Javascript or JQuery snippets as seen below, depending on your preferences.
Since a Content Editor Web Part (CEWP) is added to the page, you will loose the view selection drop down using all 3 methods.
Hide List Column Headers With CSS
Add the following text to the Content Editor Web Part (CEWP).
<style> |
tr.ms-viewheadertr { |
display: none |
} |
</style> |
|
This will work fine if it’s a view page, but in case you have added several list views to a page, then this will hide the headers of all lists.
In case you want to just hide a specific list you will have to use Javascript or JQuery. You can’t just use IDs since SharePoint has a tendency to reuse them even though that is a big no no.
With Javascript and JQuery you can iterate through the tables and find the table whose summary attribute contains the title of the list.
In the snippets below the name of the list is Hide Column Headers.
Hide List Column Headers Of A Specific List Using Javascript
The correct list table is found by first getting all table elements, and then iterate through them, and find the one(s) with the name Hide Column Headers, which is indicated by the summary attribute. The first row in the table contains the headers, so we will just hide that one.
<script> |
var tables = document.getElementsByTagName("table") |
var i; |
var rows; |
for (i=0;i<tables.length;i++) |
{ |
if (tables(i).summary == "Hide Column Headers") |
{ |
rows = tables(i).getElementsByTagName("tr") |
rows(0).style.display = "none" |
} |
} |
</script> |
When using this trick, you are iterating through actual HTML content, so you have to place the content editor web part after the list view web part.
Otherwise the generated html won’t be available. Same thing with JQuery.
Hide List Column Headers Of A Specific List Using JQuery
Using JQuery is definitely also an option and can be seen below. The result is the same.
It will find all tables with an attribute called summary whose value is “List Title” and then it will hide the first (0 based index) table row.
In SharePoint the first table row will always contain the header.
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> |
<script type="text/javascript"> |
$(document).ready(function(){ |
$("table[summary='Hide Column Headers'] tr:eq(0)").hide() |
}); |
</script> |
4: Edit the view, and uncheck Allow individual item checkboxes in the tabular view section, if you don’t want the pesky checkboxes to appear.
Save the page and reload it and you should see the result.
Hide List Column Headers With SharePoint Designer 2010
1: Go to list settings and click on the
Edit List in SharePoint Designer button.
2: Once SPD opens up, click the view you wish to change.
3: Right-click in any of the column header cells.
4: Click
Delete ->
Delete Rows.
5: Click the save button.
Please remember that this will customize (unghost) your page, so if you can live with the missing view selector,
