Friday, 30 March 2018

How to add cell borders in SharePoint list view?


Add following in a script editor:


<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;
        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;
    }

    /* Header Row */
 
    .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: #e2e3e5;
    }

    /* 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: #e2e3e5;
        border-color: #e2e3e5;
    }

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

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

</style>

No comments:

Post a Comment