0

Since modern SP doesn't really have an easy way to create a table with images, I've created a list with a few columns (including one for images). Is there a way to add gridlines to a modern list, either an OOTB option, or JSON?

Thanks for the help!

1 Answer 1

0

Acording to my research, there is no OOTB way to add gridlines to modern list. However, you can add gridlines to classic list.

You can try to the following workaround:

A:

a1.Go to the list and switch to classic mode

a2.Add a Hyperlink or Picture column

enter image description here

a3.Go to Settings (Upper right corner) >> Edit Page >> Select Add a Web Part >> Media and Content >> Select Content Editor >> Click OK.

enter image description here

a4.On the Content Editor web part, click "Click here to add new content" >> Edit Source

enter image description here

a5.Add below CSS in Web Part's "Edit Source":

<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>​​<br/>

enter image description here

enter image description here

B:

Create a SPFx webpart to display list items in a table. You can refer to this article to create SPFx.

2
  • Thank you very much for your response. The table unfortunately needs to be in Modern format. I also don't have elevated permissions to add SPFx. I'm suggesting to the client that I display the images and columns in Gallery view...make the images clickable. Hopefully she goes for it.
    – Chris
    Aug 23, 2021 at 15:18
  • Hi Chris. Thanks for you reply. If there is any solution in the future, I will share with you as soon as possible. Have a nice day! Aug 24, 2021 at 10:08

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.