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.
HTML
<!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
