Hide column header in a SharePoint list web part
I was working on a site today and I added a list web part to the site. I wanted the information to be displayed in two columns so I created a new view using “Boxed, no labels” as the style for the view. The only problems was the column headers that end up at the top that really don’t make any sense or line up with anything.
To remove these annoying headers I used a simple content editor web part. Instead of using the rich text editor, open up the Source editor and enter the following three lines:
<style>
.ms-viewheadertr { display: none;}
</style>
Under Layout in the Content Editor Web Part check the “Hidden” check box so you’re web part wont’ be seen on your site and click OK. The column headers will now be hidden from view.
This method can also be used to hide and/or change the look of other aspects of your SharePoint site without using SharePoint Designer or making any custom modifications. Any change can easily be undone or changed by going into Page Edit mode and changing the source in the web part.
How to do the same thing in SharePoint 2010
I think lines 1 and 3 should be replaced with tags.
1.
2. .ms-viewheadertr { display: none;}
3.
Lines 1 and 3 should be replaced with style tags as opposed to script tags.. My first comment did not show up since I had them in tags.
Thanks for catching my typo, that’s what I get for posting late at night
Any way to do the same for the a list accessed remotely.
I was going to use Remote List Viewer but it uses a different property (http://www.kwizcom.com/ProductPage.asp?ProductID=595&ProductSubNodeID=596).
The content query web part has a bug in moss that I can’t get around, where items are all displayed as “(blank)”. Drove me nuts for days and gave up.
Anyone have solution to showing a list on a subsite and hiding column headings like above ?
Thanks! This is exactly what I was looking for.
Nice Blog! Thanks for the information
THANK YOU!!!! It is exactly what I needed too!!!!
I usually don’t comment other people’s blogs but this is really a great workaround.
Thx!
Awesome, thanks! I love easy solutions
THANK YOU!!!!!
Does this work in Sharepoint 2003? I need to remove those annoying headers, but can’t get this to work, any idea what I am doing wrong? TIA
I’m honestly not sure. They may have changed the class name for the headers, you can find the class name using the IE developer toolbar. I know the method works in 2003 as it has been used to remove the quick launch. I started working with SharePoint in beta 1 of 2007, so I don’t have a ton of 2003 experience. I’ll see what I can find, or if anyone else has tried this with 2003, feel free to post your comments.
@Kim
The class is .ms-vh2 in 2003 and it worked great! Thanks so much for the reply.
Great idea.
Question, how do I do this selectively for only chosen webparts, while allowing other webparts to display the column headers.
Awesome – thanks for sharing!
Great blog!
Is there any possibility to apply the hiding of column headers to a specific Web Part on the selected page instead of hiding all column labels of all lists on that page?
Cheers,
Holger
Thanks for this!
Eric and Holger,
I’ve been trying to think of a way to apply this to just one web part on a page. Using the method I mentioned in the post, I can’t think of a way to apply it to single web part. You may have to use some other method. I will continue to research this and think about it and let you know if I come up with something.
If anyone else has any ideas or suggestions on how to do this feel free to post it and I’ll make sure it gets out. Sorry I don’t have a better answer at this time.
Ben
Hi.
If you want to remove the column header on only one webpart on the page:
1. Find this code:
TR class=”ms-viewheadertr” VALIGN=TOP
2. Then insert the display:none code like this:
TR class=”ms-viewheadertr” style=”display:none” VALIGN=TOP
Then it will only apply to the webpart you are editing.
(if you open your page in sharepoint designer, the webpart code is the code that are marked red and black. This is often a lot of code, so is best to search(ctrl+f) for “ms-viewheadertr” ).
Vegard, Norway.
Hey
Great blog!!! Its exactly what we have been looking for!!
Thank you
you are godsend! have been googling this up for sooooo many days already. thanks a lot!
SUHWEEEEEEEEEEETTT!!! I was just trying to figure out how to do this but didn’t want to do it across the entire site collection. Perfect targeted solution for our public pages. Thanks!
Hey extremely nice suggestion….mind blowing!!!
By any chance do you know how to do the same in preview pane style…
please help.
That’s really helped a newbie – thank you!!
I want to keep the column heading, but change the background to transparent. I can’t seem to find the style that controls the background. Ideas?
Thanks
Hi,
How did you go from list web part to content editor web part? There are some steps missing. Did you leave the same list web part on the page then added the content editor web part with the 3 lines of code, which effectively hid all of the columns on all of the web parts on that page?
Please walk us newbies through what you did step by step. Thanks!
Here are the steps:
1. Add the list web part
2. Add a content editor web part on the same page
3. Edit the Web Part Properties of the content editor web part
4. Used HTML Editor (not rich text) on the content editor web part
5. Add the three lines of code listed in the post
6. Click Apply, OK
7. This will hide everything of class .ms-viewheadertr on that particular page
Hope that helps, let me know if something still isn’t clear
Great!!!!!Its exactly what we have been looking for!!
Thanks
Great tip. Been looking for something like this. Anyone know if there is a way to hide just a single column in a web part? I cannot remove it from the view completely because it is used for a connection between two web parts – but I just don’t want to show it (always felt it looked ugly to have the filtering columns displayed in both the providing and receiving web parts).
Thx for the post.
Great tip! This was very helpful and gave me some good ideas for other workarounds, I didn’t realize that hidden web parts could still interact in this way. Thanks!
Is there a way to use this tip (which is AWESOME BTW) to target a specific web part? For example, just a links list.
Thanks again for the tip and more importantly, sharing it with the community.
E.
I haven’t yet found a way to target a single web part. If I find a way to apply it to only a single web part I will definitely post an update. If anyone else has found a way to apply it to single web part on a page feel free to post.
Ben
Let me add my thanks for this solution. Yes, single web-part targeting would be nice. Sometimes the column headings actually serve a practical purpose such as providing a useful albeit hidden sort / filter.
Hi Vegard,
your suggestion to edit the webpart in designer works.. great..Thanks.. and this is working for a single webpart on a page.
many thanks.
Hi All,
is there any tweak that we can fix the width of the individual columns in a webpart..
Thanks.
Hi
And yes it works on a single webpart 
Yeah, hope my suggestion works. It works great for me
I tried the code and it worked, but I permanently lost my quick launch bar. How do I get it back? Deleting the web part doesn’t do it. Any help would be appreciated.
Hello,
I created the content editor web part as per the above, but along with the headers to my list columns, it removed my quick launch. Deleting the content editor web part brings back my column headers but not my quick launch. Any ideas on how to get it back? Any help is greatly appreciated.
Great workaround !
Any idea how to do this in SPS 2010?
you’re a life saver! thanks
@Joke V.
Joke V.,
That’s a great question. I haven’t tried this in SharePoint 2010 yet. I have it installed in VM, unfortunately, the VM is on my computer in the office right now (I thought I had it on my laptop). I’ll work on the solution for SharePoint 2010 and post an update as soon as I have one.
I searched everywhere!!
This worked perfectly!!
AWESOME!!
@admin
In SPS 2010, you can just add your lines of code within your wiki editor (which is now standard). In editing mode place your cursor inline and go to Editing Tools->Format Text->Markup->HTML->Edit HTML Source. Here you can just add your style changes
After spending the whole of this morning trying to hide column headers on just one web part, I have finally got it, with help from this page and http://wimdeboel.wordpress.com/2009/02/22/style-webparts-differently/.
Bascially, change the style to:
#MSOZoneCell_WebPartWPQx .ms-viewheadertr { display: none;}
and replace x with the unique number for your webpart. You can fin this in the source of the page.
J
James, thanks for sharing that reference!
This worked great for me. It was quick and easy. I used it on a reporting page where I have several list views with condensed groupings. It looks so much better without column headers. Thanks for the great tip!
I’ve been working with SP for two years. This was a total eureka moment. Mind blown. SO SIMPLE. Muchos gracias.