HTML table row binnen thead verandert van breedte

Door Bas van de Ven op 08-01-2025 20:00 gewijzigd op 08-01-2025 20:10

1.577 views

In mijn body element heb ik een table element. De kolomkop (zie <thead> in mijn code) van deze table wil ik bij het omlaag scrollen tegen mijn pagina header vast zetten als de kolomkop de pagina header (zie class="header_breed" en class="header_smal") heeft bereikt.

De kolomkop (de tr binnen thead) schiet tegen mijn pagina header aan terwijl tekst in mijn tbody geleidelijk omhoog schuift. Ook de kolomkop wil ik graag geleidelijk omhoog laten schuiven.
Waar ik deze topic echter voor schrijf is dat de <tr> binnen <thead> van breedte verandert als deze tegen de pagina header aan schiet. Plak onderstaande code op je eigen webserver om dit te zien. Kopieer zelf even meerdere table rows binnen tbody. Ook de inhoud binnen <tbody> verschuift een beetje.

Ik heb ook al geprobeerd met border-spacing zonder succes.
Waar zit het hem in dat de breedte van de kolomkop (en tbody) verandert?
Al vast bedankt voor de suggesties.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content= "width=device-width, initial-scale=1.0">
<title>Fixed Header</title>

<style type="text/css">

.header_breed section {
    position: fixed;
    top: 0%;
    padding: 12px;
    left: .5%;
    width: 100%;
    height: 37px;
    font-size: 30px;
    background-color: blue;
}

.header_smal {
    position: fixed;
    top: 47px;
    padding: 0;
    left: .5%; right: 0;
    width: 99.5%;
    height: 25px;
    font-size: 14px;
}

.header_smal li {
  float: left;
}

#rechts_uitlijnen {
    display: block;
    padding: 1px;
    float: right;
}

.sticky {
  position: fixed;
  top: 86px;
  padding: 2px;
  background-color: blue;
}

</style>
</head>

<body>

<div id = "rechts_uitlijnen" class = 'header_breed'><section> </section></div>

<ul class="header_smal" style="background-color : green;" >        
    <li id = "rechts_uitlijnen"><a href='<?php echo $url;?>index.php' style = 'color : black'>Inloggen</a></li>
</ul>

<script src="test2_script_header.js"></script>

<table align="center">
<tr height = 90> </tr>
<TR>
    <TD>

<table Border = 0 align = "center">
<tr>
 <td colspan = 3 align = 'right'> Aantal schapen 871 </td>
 <td colspan = 2 style = 'font-size:13px';> &nbsp waarvan</td>
 <td width ="150"><a href = '<?php echo $url;?>pdf.php' style = 'color : blue' > print pagina </a></td>
 <td colspan = 2 ><a href="export.php"> Export-xlsx </a></td>
</tr>
<tr>
 <td colspan = 2></td>
 <td colspan = 2 style = 'font-size:13px';> 284 lammeren </td>
</tr>
<tr>
 <td colspan = 2></td>
 <td colspan = 2 style = 'font-size:13px';> 572 moeders </td>
</tr>
<tr>
 <td colspan = 2></td>
 <td colspan = 2 style = 'font-size:13px';> 15 vaders </td>
</tr>
</table>

<table Border = 0 align = "center">
<thead id="stickyHeader" style="background-color : green;">
<tr style = "font-size:12px;">
 <th style = "text-align:center;"valign="bottom";width= 100>Transponder<br> bekend <hr></th>
 <th style = "text-align:center;"valign="bottom";width= 100>Werknr <hr></th>
 <th style = "text-align:center;"valign="bottom";width= 100>Levensnummer <hr></th>
 <th style = "text-align:center;"valign="bottom";width= 100>Geboren <hr></th>
 <th style = "text-align:center;"valign="bottom";width= 80>Geslacht <hr></th>
 <th style = "text-align:center;"valign="bottom";width= 80>Generatie <hr></th>
 <th style = "text-align:center;"valign="bottom";width= 50>Laatste<br> controle <hr></th>
 <th width=60></th>
</tr>
</thead>

<tbody>
<tr align = "center">
 <td width = 100 style = "font-size:13px;"> Ja <br> </td>
 <td width = 100 style = "font-size:15px;"> 00375 <br> </td>
 <td width = 100 style = "font-size:15px;"> 102481500375 <br> </td>
 <td width = 100 style = "font-size:15px;"> 28-08-2023 <br> </td>
 <td width = 100 style = "font-size:15px;"> ooi <br> </td>
 <td width = 80 style = "font-size:15px;"> lam <br> </td>
 <td width = 80 style = "font-size:15px;">  <br> </td>
 <td width = 50> </td>
</tr>      
<tr align = "center">
 <td width = 100 style = "font-size:13px;"> Ja <br> </td>
 <td width = 100 style = "font-size:15px;"> 03750 <br> </td>
 <td width = 100 style = "font-size:15px;"> 102481103750 <br> </td>
 <td width = 100 style = "font-size:15px;"> 31-08-2023 <br> </td>
 <td width = 100 style = "font-size:15px;"> ram <br> </td>
 <td width = 80 style = "font-size:15px;"> lam <br> </td>
 <td width = 80 style = "font-size:15px;">  <br> </td>
 <td width = 50> </td>
</tr>      
<tr align = "center">
 <td width = 100 style = "font-size:13px;"> Ja <br> </td>
 <td width = 100 style = "font-size:15px;"> 37566 <br> </td>
 <td width = 100 style = "font-size:15px;"> 102481102466 <br> </td>
 <td width = 100 style = "font-size:15px;"> 24-12-2023 <br> </td>
 <td width = 100 style = "font-size:15px;"> ram <br> </td>
 <td width = 80 style = "font-size:15px;"> lam <br> </td>
 <td width = 80 style = "font-size:15px;">  <br> </td>
 <td width = 50> </td>
</tr>      
<tr align = "center">
 <td width = 100 style = "font-size:13px;"> Ja <br> </td>
 <td width = 100 style = "font-size:15px;"> 37567 <br> </td>
 <td width = 100 style = "font-size:15px;"> 102481437567 <br> </td>
 <td width = 100 style = "font-size:15px;"> 24-12-2023 <br> </td>
 <td width = 100 style = "font-size:15px;"> ooi <br> </td>
 <td width = 80 style = "font-size:15px;"> lam <br> </td>
 <td width = 80 style = "font-size:15px;">  <br> </td>
 <td width = 50> </td>
</tr>
</tbody>
</table>
<!-- Einde Aantal dieren -->

<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("stickyHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
</script>
</body>

</TD>
</TR>
</table>

</html>