CSS to update display of items in SharePoint List View with alternating colour

The list view display of items in a SharePoint List can be updated to have alternating row colour and border set by using CSS.

ListViewOfItems

To test the snippet below, edit the page displaying the list items and add a content editor WebPart. Copy and paste the CSS snippet into the content editor WebPart.

<style type=”text/css” unselectable=”on”>
/*————————————————————————-*/
/* ——- Set Alternating 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 dotted black !important; /* !important needed over override SharePoint inline style */
}
/* ——- Set background for every alternating row ——- */
.ms-listviewtable > tbody > tr.ms-alternating {
background: lightgrey
}

</style>

After saving the CSS, the list view is transformed into alternating coloured row with dotted border bottom.

AlternatingRowBorder

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s