Fixed Table Header [duplicate] - html

Question

This question already has answers here:
HTML table with fixed headers?
(31 answers)
Closed 7 years ago.
I know how to make a fixed table-header a few different ways, however I'm looking for the best way, and I only want to use <table>,<thead>,<tbody>,<tr>,<th>,<td> tags which the HTML spec provides you.
Here is a dummy table structure:
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>field</th>
<th>facility</th>
<th>change</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
<td>field1</td>
<td>facility1</td>
<td>change1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>field2</td>
<td>facility2</td>
<td>change2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
<td>field3</td>
<td>facility3</td>
<td>change3</td>
</tr>
<tr>
<td>4</td>
<td>name4</td>
<td>field4</td>
<td>facility4</td>
<td>change4</td>
</tr>
<tr>
<td>5</td>
<td>name5</td>
<td>field5</td>
<td>facility5</td>
<td>change5</td>
</tr>
<tr>
<td>6</td>
<td>name6</td>
<td>field6</td>
<td>facility6</td>
<td>change6</td>
</tr>
<tr>
<td>7</td>
<td>name7</td>
<td>field7</td>
<td>facility7</td>
<td>change7</td>
</tr>
<tr>
<td>8</td>
<td>name8</td>
<td>field8</td>
<td>facility8</td>
<td>change8</td>
</tr>
<tr>
<td>9</td>
<td>name9</td>
<td>field9</td>
<td>facility9</td>
<td>change9</td>
</tr>
<tr>
<td>10</td>
<td>name10</td>
<td>field10</td>
<td>facility10</td>
<td>change10</td>
</tr>
<tr>
<td>11</td>
<td>name11</td>
<td>field11</td>
<td>facility11</td>
<td>change11</td>
</tr>
<tr>
<td>12</td>
<td>name12</td>
<td>field12</td>
<td>facility12</td>
<td>change12</td>
</tr>
<tr>
<td>13</td>
<td>name13</td>
<td>field13</td>
<td>facility13</td>
<td>change13</td>
</tr>
<tr>
<td>14</td>
<td>name14</td>
<td>field14</td>
<td>facility14</td>
<td>change14</td>
</tr>
<tr>
<td>15</td>
<td>name15</td>
<td>field15</td>
<td>facility15</td>
<td>change15</td>
</tr>
</tbody>
</table>

Answer 1

Try this working demo. Below code:
table {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
border-collapse: separate;
border-spacing: 0 1px;
}
table thead {
flex: 0 0 auto;
width: calc(100% - 0.9em);
}
table tbody {
flex: 1 1 auto;
display: block;
overflow-y: scroll;
}
table tbody tr {
width: 100%;
}
table thead,
table tbody tr {
display: table;
table-layout: fixed;
}
tbody td,
thead th {
border-right: 1px solid transparent;
vertical-align: middle;
}
thead th {
height: 35px;
font-size: 16px;
text-align: left;
text-transform: uppercase;
}
tbody td {
text-align: left;
height: 30px;
background: #d5d5d5;
}
.table-cont {
width: 100%;
height: 350px;
}
<div class="table-cont">
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>field</th>
<th>facility</th>
<th>change</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
<td>field1</td>
<td>facility1</td>
<td>change1</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>field2</td>
<td>facility2</td>
<td>change2</td>
</tr>
<tr>
<td>3</td>
<td>name3</td>
<td>field3</td>
<td>facility3</td>
<td>change3</td>
</tr>
<tr>
<td>4</td>
<td>name4</td>
<td>field4</td>
<td>facility4</td>
<td>change4</td>
</tr>
<tr>
<td>5</td>
<td>name5</td>
<td>field5</td>
<td>facility5</td>
<td>change5</td>
</tr>
<tr>
<td>6</td>
<td>name6</td>
<td>field6</td>
<td>facility6</td>
<td>change6</td>
</tr>
<tr>
<td>7</td>
<td>name7</td>
<td>field7</td>
<td>facility7</td>
<td>change7</td>
</tr>
<tr>
<td>8</td>
<td>name8</td>
<td>field8</td>
<td>facility8</td>
<td>change8</td>
</tr>
<tr>
<td>9</td>
<td>name9</td>
<td>field9</td>
<td>facility9</td>
<td>change9</td>
</tr>
<tr>
<td>10</td>
<td>name10</td>
<td>field10</td>
<td>facility10</td>
<td>change10</td>
</tr>
<tr>
<td>11</td>
<td>name11</td>
<td>field11</td>
<td>facility11</td>
<td>change11</td>
</tr>
<tr>
<td>12</td>
<td>name12</td>
<td>field12</td>
<td>facility12</td>
<td>change12</td>
</tr>
<tr>
<td>13</td>
<td>name13</td>
<td>field13</td>
<td>facility13</td>
<td>change13</td>
</tr>
<tr>
<td>14</td>
<td>name14</td>
<td>field14</td>
<td>facility14</td>
<td>change14</td>
</tr>
<tr>
<td>15</td>
<td>name15</td>
<td>field15</td>
<td>facility15</td>
<td>change15</td>
</tr>
</tbody>
</table>
</div>