Fixed header in HTML Table - html

Question

I've tried every possible solution to get this to work, but nothing seems to be working.
I have this webpage I've created, and I have a table shown here, and I want to have my header fixed. That part I have mastered, but the thead columns dont align to the tbody columns.
I have tried assigning width to my td's manually, that didn't work either.
This is my code so far:
.tableSqlContent {
table-layout: fixed;
border-collapse: collapse;
}
.tableSqlContent th, td {
padding: 7px;
text-align: left;
}
.tableSqlContent thead {
background-color: #003265;
color: white;
font-weight: bold;
cursor: default;
}
.tableSqlContent thead tr {
display:inline-block;
position: relative;
height: 37px;
}
.tableSqlContent tbody tr td:nth-child(1) {min-width: 33%;}
.tableSqlContent tbody tr td:nth-child(2) {min-width: 20%;}
.tableSqlContent tbody tr td:nth-child(3) {min-width: 20%;}
.tableSqlContent tbody tr td:nth-child(4) {min-width: 10%;}
.tableSqlContent tbody tr td:nth-child(5) {min-width: 10%;}
.tableSqlContent tbody tr td:nth-child(6) {min-width: 7%;}
.tableSqlContent thead tr th:nth-child(1) {min-width: 33%;}
.tableSqlContent thead tr th:nth-child(2) {min-width: 20%;}
.tableSqlContent thead tr th:nth-child(3) {min-width: 20%;}
.tableSqlContent thead tr th:nth-child(4) {min-width: 10%;}
.tableSqlContent thead tr th:nth-child(5) {min-width: 10%;}
.tableSqlContent thead tr th:nth-child(6) {min-width: 7%;}
.tableSqlContent tbody {
display: block;
height: 700px;
overflow: auto;
}
.tableSqlContent tbody tr:nth-child(even) {
background-color: #eeeeee;
}
.tableSqlContent tbody tr:hover {
color: #003265;
cursor: pointer;
background-color: #dddddd;
}
<table Class="tableSqlContent">
<thead>
<tr>
<th>Connectionstring</th>
<th>Klinik Navn</th>
<th>IP_Adresse</th>
<th>P-nummer</th>
<th>Systemtype</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<?php
foreach($dbh->query($query) as $rows){
?>
<tr>
<td><?php echo $rows['ConnectionString']?></td>
<td><?php echo $rows['Name']?></td>
<td><?php echo $rows['IP_Adresse']?></td>
<td><?php echo $rows['Ydernummer']?></td>
<td><?php echo $rows['Systemtype']?></td>
<td><?php echo $rows['Version']?></td>
</tr>
<?php
}
?>
</tbody>
</table>
This is how it looks:

Answer 1

This seems to be working.
.fixed_header {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_header tbody {
display: block;
overflow: auto;
height: 200px;
width: 100%;
}
.fixed_header thead {
background: black;
color: #fff;
}
.fixed_header thead tr {
display: block;
}
.fixed_header th,
.fixed_header td {
text-align: left;
width: 100px;
max-width: 100px;
}
<table class="fixed_header">
<thead>
<tr>
<th>Connection string</th>
<th>Klinik Navn</th>
<th>IP_Adresse</th>
<th>P-nummer</th>
<th>Systemtype</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1-0</td>
<td>row 1-1</td>
<td>row 1-2</td>
<td>row 1-3</td>
<td>row 1-4</td>
</tr>
<tr>
<td>row 2-0</td>
<td>row 2-1</td>
<td>row 2-2</td>
<td>row 2-3</td>
<td>row 2-4</td>
</tr>
<tr>
<td>row 3-0</td>
<td>row 3-1</td>
<td>row 3-2</td>
<td>row 3-3</td>
<td>row 3-4</td>
</tr>
<tr>
<td>row 4-0</td>
<td>row 4-1</td>
<td>row 4-2</td>
<td>row 4-3</td>
<td>row 4-4</td>
</tr>
<tr>
<td>row 5-0</td>
<td>row 5-1</td>
<td>row 5-2</td>
<td>row 5-3</td>
<td>row 5-4</td>
</tr>
<tr>
<td>row 6-0</td>
<td>row 6-1</td>
<td>row 6-2</td>
<td>row 6-3</td>
<td>row 6-4</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
<td>row 7-3</td>
<td>row 7-4</td>
</tr>
<tr>
<td>row 8-0</td>
<td>row 8-1</td>
<td>row 8-2</td>
<td>row 8-3</td>
<td>row 8-4</td>
</tr>
<tr>
<td>row 9-0</td>
<td>row 9-1</td>
<td>row 9-2</td>
<td>row 9-3</td>
<td>row 9-4</td>
</tr>
<tr>
<td>row 10-0</td>
<td>row 10-1</td>
<td>row 10-2</td>
<td>row 10-3</td>
<td>row 10-4</td>
</tr>
<tr>
<td>row 11-0</td>
<td>row 11-1</td>
<td>row 11-2</td>
<td>row 11-3</td>
<td>row 11-4</td>
</tr>
<tr>
<td>row 12-0</td>
<td>row 12-1</td>
<td>row 12-2</td>
<td>row 12-3</td>
<td>row 12-4</td>
</tr>
<tr>
<td>row 13-0</td>
<td>row 13-1</td>
<td>row 13-2</td>
<td>row 13-3</td>
<td>row 13-4</td>
</tr>
<tr>
<td>row 14-0</td>
<td>row 14-1</td>
<td>row 14-2</td>
<td>row 14-3</td>
<td>row 14-4</td>
</tr>
<tr>
<td>row 15-0</td>
<td>row 15-1</td>
<td>row 15-2</td>
<td>row 15-3</td>
<td>row 15-4</td>
</tr>
<tr>
<td>row 16-0</td>
<td>row 16-1</td>
<td>row 16-2</td>
<td>row 16-3</td>
<td>row 16-4</td>
</tr>
<tr>
<td>row 17-0</td>
<td>row 17-1</td>
<td>row 17-2</td>
<td>row 17-3</td>
<td>row 17-4</td>
</tr>
<tr>
<td>row 18-0</td>
<td>row 18-1</td>
<td>row 18-2</td>
<td>row 18-3</td>
<td>row 18-4</td>
</tr>
<tr>
<td>row 19-0</td>
<td>row 19-1</td>
<td>row 19-2</td>
<td>row 19-3</td>
<td>row 19-4</td>
</tr>
<tr>
<td>row 20-0</td>
<td>row 20-1</td>
<td>row 20-2</td>
<td>row 20-3</td>
<td>row 20-4</td>
</tr>
<tr>
<td>row 21-0</td>
<td>row 21-1</td>
<td>row 21-2</td>
<td>row 21-3</td>
<td>row 21-4</td>
</tr>
</tbody>
</table>

Answer 2

You need to remove some css because is in conflict:
.tableSqlContent {
table-layout: fixed;
border-collapse: collapse;
overflow: auto;
}
.tableSqlContent th, td {
padding: 7px;
text-align: left;
}
.tableSqlContent thead {
background-color: #003265;
color: white;
font-weight: bold;
cursor: default;
}
.tableSqlContent tbody tr:nth-child(even) {
background-color: #eeeeee;
}
.tableSqlContent tbody tr:hover {
color: #003265;
cursor: pointer;
background-color: #dddddd;
}
thead th {
position: sticky;
position: -webkit-sticky;
top: 0px;
z-index: 999999;
background-color: #003265;
}
<table class="tableSqlContent">
<thead>
<tr>
<th>Connectionstring</th>
<th>Klinik Navn</th>
<th>IP_Adresse</th>
<th>P-nummer</th>
<th>Systemtype</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
</tbody>
</table>
hope it helps
-- added css for sticky header.