Change the background color for an entire column in a sharepoint online list

Question

I've been looking for a solution to change the background color of specific columns in a SPO list. There seems to be a lot of information on conditional color coding but not the requirement that I am looking for.

Can anyone help?

Answer 1

In Classic experience or on SharePoint 2013 sites, you can use CSS to change the background color od the column. You can add this CSS in Script Editor or Content Editor Web part.

Try using below CSS on your page:

<style>
   table.ms-listviewtable tbody tr td:nth-child(3){
      background-color: skyblue;
   }
   table.ms-listviewtable thead tr th:nth-child(3){
      background-color: skyblue;
   }
</style>

Here .ms-listviewtable is class of table : Inspect the your table on list view and use the suitable selector.

And in place of nth-child(3), use the column number from your list view.

Answer 2

If you use classic experience, we can use JSLINK to achieve it. Add code into a script editor web part in the list view page.

<script type="text/javascript">
(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {        
        "ColorField": { "View": colorField}
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function colorField(ctx) {
    var currentField = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 
    return "<div style='background-color: red; padding:4px 8px 4px 4px;'>" + currentField + "</div>";
}
</script>

If you use modern experience, we can use column JSON formatting to achieve it.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "debugMode": true,
  "txtContent": "@currentField",
  "style": {
    "background-color": "red"
  }
}

Answer 3

You can use JSLinks - javascript files, attached to specific view. You need to edit ListViewWebPart and add link to JS file in properties.

Muawiyah Shannak has a great project with many samples and use cases. Official MS documentation about how this is called SPFX in SPO. And, just in case JSLinks are disabled, a short tutorial how to enable it.