[SalesForce] How to center align the text of the column headings for a lightning:datatable

I'm able to apply color or make the column heading text bold, but I can't center align the text for some reason.

<lightning:datatable data="{! v.data }"
        columns="{! v.columns }"
        keyField="id"
        resizeColumnDisabled="true"
        hideCheckboxColumn="true"/>

.THIS table thead th {
   color: red;
   font-weight:bold;
}

Putting text-align: center in the css doesn't seem to have any effect on the column text. Even directly altering the div surrounding the lightning:datatable with a style tag doesn't work.

Any help would be great.

Best Answer

I just add css that below this and worked.

for column .THIS .slds-th__action{ justify-content: center !important; }

for body .THIS .slds-grid_align-end { justify-content: center !important; }

Related Topic