nicht angemeldet
Deine Angaben und Fragen sind leider nicht sehr konkret. Die Hilfsbereitschaft in Foren sinkt zudem häufig rapide, wenn immer wieder kleckerweise Fragen nachgeschoben werden und damit bisherige Lösungen hinfällig werden.
So ist zum Beispiel nicht klar ob die Lücke nach der Überschriftzeile beim Scrollen verschwinden soll oder nicht.
Ich habe eine Lösung mit "padding" erstellt. Wahrscheinlich gibt es auch andere Lösungen, aber ob die bei der geforderten Flexbilität (horizontales und seitliches Scrollen) in allen Browsern bei unterschiedlichen Fensterbreiten funktionieren - keine Ahnung. Aktuell so, das der Abstand beim Scrollen bestehen bleibt.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Scrollbare Tabelle</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p,
th,
td {
font-size: 1.4rem;
}
h1,
p {
text-align: center;
}
.scrollen {
overflow: auto;
margin-left: auto;
margin-right: auto;
width: 80vw;
height: 40vh;
}
.scrollen table {
text-align: left;
position: relative;
}
.scrollen thead tr:nth-of-type(1) th {
padding-bottom: 2rem;
}
/*.scrollen tbody tr:nth-of-type(1) td {*/
/*padding-top: 2rem;*/
/*}*/
.scrollen th,
.scrollen td {
padding: 0.25rem;
}
.scrollen th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
}
</style>
</head>
<body>
<main>
<h1>Scrollbare Tabelle</h1>
<p>Lösung, aber sachlich sinnfrei.</p>
<div class="scrollen">
<table>
<thead>
<tr>
<th>01-01</th>
<th>xxxxxx</th>
<th>xxxxxx</th>
<th>xxxxx</th>
<th>xxxxx</th>
<th>xxxxxxxxxxxxxxxx</th>
<th>xxxxxxx</th>
<th>xxxxxxxxxxxxxxxxxx</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>02</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>03</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>04</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>05</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>06</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>07</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>08</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>09</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>10</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>11</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>12</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>13</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>14</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>15</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>16</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>17</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>18</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>19</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>20</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
</tbody>
</table>
</div>
</main>
<footer>
<p><a href="https://forum.selfhtml.org/self/2025/apr/14/tebellen-scrollen/1819572#m1819572">https://forum.selfhtml.org/</a></p>
</footer>
</body>
</html>
Auge
Rolf B
MudGuard
Gunnar Bittersmann
Matthias Scharwies