Data Tables

This table has a header row that will be fixed to the top of the browser window as the table content scrolls down. It also highlights rows as the mouse moves over them.

Column 1	Column 2	Column 3	Column 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4
Data 1	Data 2	Data 3	Data 4

Code (minimum required)

table {
    font-size: 100%;
    line-height: 150%;
    border-collapse: collapse;
  }
  th, td {
    padding: .25rem .5rem;
  }

/* data table */
  .data-table {
  }
  .data-table th {
    position: sticky;
    top: var(--header-height);
    z-index: 2;
    color: var(--heading-text-color);
    background-color: var(--heading-background-color);
    font-weight: normal;
    font-size: 90%;
  }
  .data-table > tbody > tr:hover {
    color: var(--selected-option-color);
    background-color: var(--selected-option-background-color);
  }
  .data-table td {
    border-bottom: 1px solid var(--border-color);
  }
  .data-table td:first-child {
    border-left: 1px solid var(--border-color);
  }
  .data-table td:last-child {
    border-right: 1px solid var(--border-color);
  }
</style>

<table class="data-table">
<thead>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th></tr>
</thead>
<tbody>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
<tr><td>Data 1</td><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
</tbody>
</table>