Hide column header in a SharePoint list web part view ?

2012-12-13

Question

_{Thursday, December 13, 2012 5:27 AM}

Hi ALl,

I have a links list in SharePoint 2010 and created a custom standard view to show links on home page.

I want to hide header column for that particular created list web part view.I have used following css but it's hide all list

and libraries header column.

.ms-viewheadertr
{
display: none;
}

I want to hide specific list web part view column hide.

Following is a snap in this i want to hide URL column in this view.

Thanks,

Balaji More

All replies (9)

_{Wednesday, December 19, 2012 8:58 AM ✅Answered | 5 votes}

Hi Blalji,

We can use Internet Explorer(IE) developer tool(by pressing F12) to find a parent element, which has a attribute id. Then in the CSS, use the id to reduce the scope.

For example, the web part must be in a Div with id such as WebPartWPQX(X is a number). Now, we can use the following CSS:

#WebPartWPQX .ms-viewheadertr
{
display: none;
}

So only titles of the webpart within the WebPartWPQX will be hided.

Thanks,
Jinchun Chen

Jinchun Chen(JC)
TechNet Community Support

_{Friday, December 28, 2012 11:45 AM ✅Answered}

Hi Jinchun,

Thanks for reply.Its working for me.

I have solved this issue with creating id in css style sheet and used that id in table <td> tag.

It worked for me.

#hide-title .ms-viewheadertr {
    display: none;
}

Thanks,

Balaji more

_{Thursday, December 13, 2012 6:55 AM}

Hi,

The css mentioned above will hide the header of all the list on the page. To meet your requirement which is to a specific list, you can create a custom web part with the listviewwebpart (in MOSS 2007) and xsltlistviewwebpart (in SharePoint 2010). The ViewXml property will give you the Xml of the list view that you want to bind to, edit the xml to remove the column header and then bind the xml to the control or you can have inline css as mentioned above to hide the column.

Thanks,

Ajeet

If my post is helpful - please click on the green arrow to mark it as answer

_{Thursday, December 13, 2012 8:36 AM}

"I want to hide header column for that particular created list web part view"

Check with a dev tool ( for ex IE F12 ) if realy that class (ms-viewheadertr) is applied to your column header

Your css style changes, did you applied in a separate css file, and loaded after corev4.css file ?

Apply also "important " to it..ms-viewheadertr
{
display: none!important;
}

"I want to hide specific list web part view column hide"

Using SHP Designer, connect to your site, open the page, select your webpart and from the ribbon remove the unwanted column.

Romeo Donca, Orange Romania (MCSE, MCITP, CCNA) Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

_{Thursday, December 13, 2012 11:39 AM | 1 vote}

Why don't you use a Content Query Web Part instead?

you can then set Apeareance -> Chrome Type = None

_{Thursday, December 13, 2012 11:46 AM}

You can do that in two ways

1)Add the content editor webpart to the page and use the same code with !important attribute .

2)Edit the page in the SharePoint designer and put the same code in the particular page with !important attribute .

If its a webpart page you can also use the zone Id to change the style of webparts in that particular zone

If you use the same code in css it is replicated in other pages because other pages inherit the same css too.

_{Saturday, August 16, 2014 12:44 PM | 2 votes}

You can add the following to an .xsl file and link to it in the "Miscellaneous" options when you edit the web part. By doing it this way, you can reuse the same style sheet over and over.

This xsl basically overrides a couple of templates located in the "vwstyles.xsl" file, and removes the lines that add the header.

(This code works in production, but I may not have replicated it properly in this forum, so please test first.)

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" 
                xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" 
                xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" 
                xmlns:asp="http://schemas.microsoft.com/ASPNET/20" 
                xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" 
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
                xmlns:msxsl="urn:schemas-microsoft-com:xslt" 
                xmlns:SharePoint="Microsoft.SharePoint.WebControls" 
                xmlns:ddwrt2="urn:frontpage:internal" 
                xmlns:o="urn:schemas-microsoft-com:office:office">
  <xsl:include href="/_layouts/xsl/main.xsl"/>
  <xsl:include href="/_layouts/xsl/internal.xsl"/> 
  <xsl:template  match="View" mode="full">
     <xsl:apply-templates select="." mode="RenderView" />
     <xsl:apply-templates mode="footer" select="." />
  </xsl:template>
  <!-- Boxed and Boxed No Labels -->
  <!-- Issues Boxed and Boxed No Labels -->
  <xsl:template  match="View[ViewStyle=/@ID='12' or ViewStyle=/@ID='13' or ViewStyle=/@ID='18' or ViewStyle=/@ID='19']" mode="full">
     <xsl:apply-templates select="." mode="RenderView" />
  </xsl:template>
</xsl:stylesheet>

_{Monday, March 2, 2015 8:34 PM}

This is by far the easiest way to accomplish the task in a repeatable way, with minimal code, and without aspx editing. I created a file called "Hide Column Headers.xsl", added the script, and pointed to the file location in the "Miscellaneous" options "XSL Link" box in the Edit Webpart and it worked perfectly. All future hiding can now be done by referencing that same file for all subsequent lists for which I want to hide the colums!

Fantastic!

_{Monday, March 2, 2015 10:13 PM}

I did find one down side. When applying the file to a list that displays employee pictures, the pictures do not display. I have experienced a similar result when selecting a style other than "default" in the webpart editor. Is there something in this script that changes the style? (maybe the "boxed" portion near the bottom?)

All other lists work great and do not display the column headers. Would be nice if pictures would work. Any suggestions?

Share via

Hide column header in a SharePoint list web part view ?

Question

All replies (9)

Additional resources