1

I am trying to find a way to add gridlines to a SharePoint list view. I know that I have the ability to add a datasheet view but I want the gridlines to stay after I stop editing the list. The goal is to make the list look fairly close to an excel spreadsheet if at all possible.

2

Please insert a content editor webpart in list view page and add the below style in it

<style>
    /* ---------- Table Rows ----------*/
    /* Set background for every row */
    .ms-listviewtable > tbody > tr {
        background: white;
    }

    /* Set border for every row */
    .ms-listviewtable > tbody > tr td{
        border-bottom: 1px solid #AFAFAF !important; /* !important needed over override SharePoint inline style */
        border-left: 1px solid #AFAFAF !important;
        border-right: 1px solid #AFAFAF !important;
    }

    /* Set background for every alternating row */
    .ms-listviewtable > tbody > tr.ms-alternating {
        background: #E2E3E5;
    }

    /* ---------- Table Header Row ----------*/
    /* Remove background set in SharePoint's general data table style */
    .ms-listviewtable tr.ms-viewheadertr {
        background: transparent;
    }

    /* Modify background color */
    tr.ms-viewheadertr > th.ms-vh-icon, /* Input box and attachment icon */
    tr.ms-viewheadertr > th.ms-vh, /* Text */
    tr.ms-viewheadertr > th.ms-vh2,
    tr.ms-viewheadertr > th /* Text */ {
        background: #2E4C70;
    }

    /* Modify background color on hover */
    tr.ms-viewheadertr > th.ms-vh:hover,
    tr.ms-viewheadertr > th.ms-vh2:hover,
    tr.ms-viewheadertr > th  {
        background-color: #273C51;
        border-color: #273C51;
    }

    /* Modify font color */
    .ms-viewheadertr a,
    .ms-viewheadertr div {
        color: white;
    }

    /* Modify font color on hover */
    .ms-viewheadertr a:hover,
    .ms-viewheadertr div:hover {
        color: white;
    }
    tr.ms-viewheadertr > th.ms-vh-icon:last-child {
        display:none;
    } 
</style>

Thanks

  • This worked almost perfectly, except that a few of the column headers are a different color that the other so that when I updated the HEX codes to match our current design 3 of 7 columns remained in a different color. Any thoughts on how to solve for this? – JPej Oct 14 '15 at 17:50
  • Also, when the HTML converts the header text to white this also makes the text is the filter drop down white on a white background. – JPej Oct 14 '15 at 18:07
1
  • Edit your list view
  • Goto Style section
  • Select 'Shaded' in View Style selection pane
  • You have got a similar view to excel.

Other way is add a custom css style into your list view page

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