Hello,
I have the following problem, which I hope someone can help me with.
First of all, the solution must be IE11 compatible.
I have divs in tabular form, the head should be position fixed.
Then I fill the "table" with JS.
My problem now is that https://speedtest.vet/ https://vidmate.bid/ https://wordtopdf.ltd/ the width of the header elements is lost as soon as I set position fixed.
You could now set position sticky in other browsers, but this is not supported in the ie11.
Here as a code, is probably more understandable.
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>
- <! - The data part normally only arises with js and is only used for illustration ->
- <div class = "data">
- <div> Lorem ipsum dolor sit amet, conseteturasd gubergren, no sea takimata sanctus est Lorem ipsum do </div>
- <div> und labore et dolore magna aliquyam erat, sed diam vo </div>
- <div> ed diam nonumy eirmod temporally invidluptua. At vero eos et accusam et justo duo dolores et ea reb </div>
- <div> sadipscing elitr, sum. Always clita k </div>
- </div>
- </body>
- </html>
Show all
In the end, the data part naturally contains so much data that the page is scrollable.
Does anyone have any solutions?