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.


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


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



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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s