Position fixed und sticky in ie11?

  • 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

    1. <! DOCTYPE html>
    2. <html lang = "en">
    3. <head>
    4. <meta charset = "UTF-8">
    5. <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
    6. <meta http-equiv = "X-UA-Compatible" content = "ie = edge">
    7. <title> Document </title>
    8. <style>
    9. html, body {
    10. width: 100%;
    11. display: table;
    12. font-family: Arial, Helvetica, sans-serif;
    13. font-size: 12;
    14. }
    15. .head {
    16. font: bold;
    17. display: table-row;
    18. height: 20px;
    19. }
    20. .head> div {
    21. display: table-cell;
    22. padding: 2px;
    23. border: 1px solid yellow;
    24. }
    25. .data {
    26. display: table-row;
    27. margin-top: 20px;
    28. }
    29. .data> div {
    30. display: table-cell;
    31. border: 1px solid black;
    32. }
    33. .fixed {
    34. position: fixed;
    35. right: 0px;
    36. left: 0px;
    37. top: 0;
    38. }
    39. </style>
    40. </head>
    41. <body>
    42. <div class = "head fixed">
    43. <div> th1 </div>
    44. <div> th2 </div>
    45. <div> th3 </div>
    46. <div> th4 </div>
    47. </div>
    48. <! - The data part normally only arises with js and is only used for illustration ->
    49. <div class = "data">
    50. <div> Lorem ipsum dolor sit amet, conseteturasd gubergren, no sea takimata sanctus est Lorem ipsum do </div>
    51. <div> und labore et dolore magna aliquyam erat, sed diam vo </div>
    52. <div> ed diam nonumy eirmod temporally invidluptua. At vero eos et accusam et justo duo dolores et ea reb </div>
    53. <div> sadipscing elitr, sum. Always clita k </div>
    54. </div>
    55. </body>
    56. </html>

    Show all

    In the end, the data part naturally contains so much data that the page is scrollable.

    Does anyone have any solutions?

  • Bitte kein altes Tabellenlayout.

    Eine Tabelle bekommst du problemlos in deine Seite, OHNE das "body & html" display:table sein müssen!

    Benutze für deine Seitengestaltung doch lieber Flexbox (die grundlegenden Sachen werden von IE11 unterstützt) und mache deine eigentlichen

    Tabellendaten in eine richtige Tabelle, deren Kopf (thead) du fix machst und den Körper (tbody) scrollbar.

    Und (auch wenn es nur zur Veranschaulichung ist) setze Text doch bitte in p's anstatt div's.


    Zum Problem:

    Position fixed nimmt deinen "Tabellenkopf" aus dem normalen Fluss. Da passen sich die Childs mit "table-cell" natürlich nicht mehr den Spaltenbreiten der Tabelle an.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!