nicht angemeldet
Eine Grundlage jeder guten Website ist korrektes HTML und CSS. Da gibt es bei dir offensichtlich noch Defizite. Es wäre also sinnvoll, wenn du erst mal das aktuelle HTML und CSS lernen würdest.
Bestimmte HTML-Elemente sind für bestimmte Inhalte gedacht. Das deine x-en Platzhalter sind ist mir klar, aber du hast offensichtlich überhaupt keine Tabellendaten, wahrscheinlich weißt du nicht einmal was Tabellendaten sind.
Webseiten sollten so erstellt werden, das nur noch unten und oben gescrollt werden muss. Jedes Scrollen innerhalb von Webseiten ist benutzerunfreunlich und sollte deshalb vermieden werden. Mit einigen Problemen wirst du aktuell konfrontiert und das wird sich erfahrungsgemäß weiter durchziehen.
Um für den Inhalt (also die Informationen der Webseite) die passenden Elemente zu finden, muss man den Inhalt kennen.
Ich habe mal eine allgemeine Lösung erstellt:
<!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 {
background-color: gold;
overflow: auto;
margin-left: auto;
margin-right: auto;
width: 80vw;
height: 70vh;
}
</style>
</head>
<body>
<main>
<h1>Scrollbare Tabelle</h1>
<p>Lösung, aber sachlich sinnfrei.</p>
<div class="scrollen">
<table>
<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>
<tr>
<td>21</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>22</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>23</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>24</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>25</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>26</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>27</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>28</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>29</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>30</td>
<td>xxxxxx</td>
<td>xxxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxxxxxxxxxxxx</td>
<td>xxxxxxx</td>
<td>xxxxxxxxxxxxxxxxxx</td>
</tr>
</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