How can I change the background color in table header and fix the header in HTML, without JavaScript?

Question

I tried to use this, but it didn't work.

.header {
  position: fixed;
  top: 0;
  width: 100%;
}

Answer 1

If the following is the layout of your basic table:

<table>
  <tr><th>Something Here</th></tr>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>

then here is what you can do:

th{
  color: white;
  background: black;
}

where th is the table-header.

Here is a reference link on the table headers. I hope it will be helpful.

This is the working example:

th {
  color: white;
  background: black;
}

<table>
  <tr>
    <th>Something Here</th>
  </tr>
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
</table>

Answer 2

You could say in your css, that the first <tr> (in which the <th> tags usually are) has a specific background and should be fixed

tr:first-child
{
  background-color: yourColor;
  position:fixed;
}

This example might also help you out https://codepen.io/tjvantoll/pen/JEKIu