I have the below code which modifies the look of my table and it works very well however the columns which are custom made person/group fields are not showing the same font colour as the rest of the columns (black). I believe this might be because of the icon that appears before the name but the 'Modified by' column is fine.
Also does anyone know how to specify a border around the heading row?
Many Thanks
/* ---------- Table Rows ----------*/
/* Set background for every row */
.ms-listviewtable > tbody > tr {
background: white;
}
/* Set border for every row */
.ms-listviewtable > tbody > tr td{
border-top: 2px solid Black !important; /* !important needed over override SharePoint inline style */
border-left: 1px solid lightblue!important;
border-right: 1px solid lightblue!important;
}
/* Set background for every alternating row */
.ms-listviewtable > tbody > tr.ms-alternating {
background: #F0F8FF;
}
/* ---------- 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.ms-vh2-nofilter,
tr.ms-viewheadertr > th.ms-vh2-div,
tr.ms-viewheadertr > th /* Text */ {
background: #A9A9A9;
text-align: center;
}
/* 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: #778899;
border-color: #273C51;
}
/* Modify font color */
.ms-viewheadertr a,
.ms-viewheadertr div {
color: Black;
}
/* 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;
}