Ich empfehle, etwas bewährtes zu verwenden, nämlich datatables:
https://datatables.net/examples/basic_init/scroll_y.html
Vielfältig konfigurierbar, z. B. können nicht benötigte Features ausgeschaltet werden.
Das sieht ganz gut aus, schau ich mir morgen mal an. Danke.
Alles anzeigenSo ganz verstehe ich das gerade nicht.
Du möchtest das der head nach den befüllen durch Js Position fixed hat ? und zwar auf allen Browsern ?
Soll das eine tabelle werden die nach unten scrollbar ist oder zur Seite ?
Wenn du mal erklären könntest was du genau vor hast denke ich mal da du den Tabellen quatsch durch display:flex ersetzen kannst.
Flexbox kann das auch was du vor hast
Ja, dass soll im Prinzip ne Tabelle werden die nach unten Scrollbar ist. Und das Div mit der Class "head" soll halt fixed sein.
Bei display:flex ist mir nicht klar, wie ich die Breite der einzelnen divs definiere. Denn diese ergibt sich ja erst aus dem Platz der einzlenen divs welche die Daten brauchen.
Hallo,
ich habe folgendes Problem, bei den mir hoffentlich jemand helfen kann.
Vorab, die Lösung muss IE11 kompatibel sein.
Ich habe divs in Tabellenform, wobei der Kopf position fixed sein soll.
Danach fülle ich mittels JS die "Tabelle".
Mein Problem ist nun, dass die Breite der Kopf-Elemente verloren geht, sobald ich position fixed setzte.
In anderen Browsern könnte man nun position sticky setzen, allerdings wird das im ie11 nicht unterstützt.
Hier mal als Code, ist wahrscheinlich verständlicher.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body {
width: 100%;
display: table;
font-family: Arial, Helvetica, sans-serif;
font-size: 12;
}
.head {
font: bold;
display: table-row;
height: 20px;
}
.head > div {
display: table-cell;
padding: 2px;
border: 1px solid yellow;
}
.data {
display: table-row;
margin-top: 20px;
}
.data > div {
display: table-cell;
border: 1px solid black;
}
.fixed {
position: fixed;
right: 0px;
left: 0px;
top:0;
}
</style>
</head>
<body>
<div class="head fixed ">
<div>th1</div>
<div>th2</div>
<div>th3</div>
<div>th4</div>
</div>
<!-- Der Data Teil entsteht normal erst mit js und dient nur zur Veranschaulichung-->
<div class="data">
<div>Lorem ipsum dolor sit amet, conseteturasd gubergren, no sea takimata sanctus est Lorem ipsum do</div>
<div>unt ut labore et dolore magna aliquyam erat, sed diam vo</div>
<div>ed diam nonumy eirmod tempor invidluptua. At vero eos et accusam et justo duo dolores et ea reb</div>
<div>sadipscing elitr, sum. Stet clita k</div>
</div>
</body>
</html>Die Data Anteil enthält zum Schluss natürlich so viel Daten, das sie Seite scrollbar ist.
Hat jemand Lösungsvorschläge?
Danke