CSS Challenge Response: Simple styles for SharePoint list

A CSS Challenge from Fred:

Make lists look like basic MS-Office tables:

  • dark background header row with white text
  • alternate rows with light color background
  • dark bottom borders on every rows

Here is the CSS to start your list/library styles!

/* ---------- 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 */
		}

	/* 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 /* Text */ {
			background: #2E4C70;
		}

	/* Modify background color on hover */
		tr.ms-viewheadertr > th.ms-vh:hover,
		tr.ms-viewheadertr > th.ms-vh2:hover {
		            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;
		}

/*
SharePoint Experts, Inc.
sharepointexperience.com
*/