How to set Table's header?

[dlyltm]

How to set the background color of the header, vertically center the font, and draw the vertical separation line?

[capdiem]

@dlyltm

• Set bgcolor of the header:

  <MDataTable HeaderProps="@(new Dictionary<string, object>(){ { "Class", "custom-header-css"} })"></MDataTable>

  .custom-header-css {
    background-color: pink;
  }

• vertically center the font
  I think it's already vertical center in the header th.

• draw the vertical separation line
  I don't understand. Do you what something like <table>?
  

[dlyltm]

Thank you for your answer.
What I see is that the texts are on the top.The vertical separation line in the header is not displayed.

[capdiem]

@dlyltm All your problems can be solved with CSS. If all your datatable are the same UI, you can set the CSS settings globally:

/* set background color of header */
.m-data-table-header {
    background-color: pink;
}

/* add right border to th and td */
.m-data-table th, .m-data-table td {
  border-right: thin solid rgba(0,0,0,.12);
}

.m-data-table th:last-child, .m-data-table td:last-child {
    border-right: none;
}

vertically center the font. What I see is that the texts are on the top.

Can you provide UI screenshots?

[dlyltm]

OK, I see. Thanks.

[dlyltm]

Sorry,I just tried it and it doesn't seem to work.

[capdiem]

What's not working?

[dlyltm]

HeaderProps is set as you said, and CSS files are added, but the header has not changed.