I am looking to modify the headings on a datasheet view of my list. I want to do any 1 of the 3 options below

1. Remove the headings column. I have tried adding the following code .ms-viewheadertr { display: none; }

This works however when you click on a list item the input box is moved to another location further on the right of the screen which is outside the table

2. Remove the option for a user to add a column by pressing on the + icon at the end of the table

3. make the heading text white and the heading background white.enter image description here

1 Answer 1


Here is some CSS that should satisfy Option 1.

.ms-viewheadertr *, .ms-viewheadertr {
    visibility: hidden;
    height: 0 !important;
    line-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0 !important;
    border-bottom: 0 !important;

I chose to use visibility:hidden instead of display:none. By doing that there is still the original space allocated to the header and as a result, the input box' positioning will match with the corresponding cells.

Updated the answer above.

  • With the updated rule the header should have a height of 0px.
  • Thanks that worked as you described. Do you know any way I can reduce the height of the heading as it is leaving a large blank space between my text and the start of the grid. Jul 26, 2017 at 16:58
  • Please see the updated answer. With this rule the height of the header should be 0px. Jul 29, 2017 at 5:17
  • @TomSanderson I would be happy if you could mark it as answer then. Thanks! Jul 31, 2017 at 22:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.