Scrollbare Tabellen mit festem Header & Footer (3/2024)

HTML-code für die Tabelle:

      <table id='table' style="display:inline-block; height:200px; overflow-y:scroll; resize:vertical;" cellspacing='0'> 
	<thead id="t_head" style="position:sticky; top:0px; z-index:1; background-color:white; "></thead>
	<tbody id="t_body" style=""></tbody>
      </table>

Haupt-CSS-feature: "position:sticky; top:0px;"

Restproblem: Borders im Header erscheinen nicht. Setzt man "z-index:-1" erscheinen sie, aber er body liegt beim scroll darüber!
Ohne "th { background-color:white; }" scheint der body durch

Lösung: 'border-collapse:collapse' nicht verwenden!
Dafür 'border-bottom' & 'border-left' & cellspacing='0' (bzw CSS 'border-spacing:0px;')
CSS-code

      tr, td, th { border-bottom: 1px solid black; border-left: 1px solid black; }

Footer-Anzeige analog, wenn man "style="position:sticky; bottom:0px; z-index:1; background-color:white;" benutzt!

Letzte Änderung: wolfk.wk@wolfk-wk.de