Fixed header table scroll

Fixed header table scroll

HTML

<div class="table-div">

<table class="Table">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2 - and it's a long one!</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
    </tbody>
</table>
</div>

CSS

html {
  font-family:arial;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color:darkgray;
}
 
table {
  border-collapse:collapse;
 }

td {
  border:1px solid lightgray;
}

.table-div {
  max-width:75%;
  overflow-x:auto;
  border:1px solid black;
  background-color:lightgray;
}

.Table {
  background-color:transparent;
  min-width:100%;
}

.Table thead,
.Table tbody {
  display:block;
}

.Table thead {
  
  border-bottom:1px solid black;
  
}

.Table thead > tr {
  width:calc(100% - 12px);
}

.Table tbody {
  max-height:100px;
  overflow-x:hidden;
 }
 
 .Table tr {
   display:flex;
 }
 
.Table td, 
.Table th {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:3px 10px;
  width:100%;
  background-color:white;
}

.Table th {
  background-color:lightgray;
}

.Table tr:nth-child(2n) > td {
  background-color:#EEFFEE;
}

.Table th {
  border-left:1px solid black;
}

.Table th:first-child {
  border-left:0;
}

.Table th:nth-child(3),
.Table td:nth-child(3) {
  min-width:30%;
}