Overflow-Y für Tabelle in Internet Explorer

[FrankButcher]

Servus,

Ich habe eine Tabelle mit vielen Rows, die in einem Div mit fixer Höhe liegt. Ich versuche seit Tagen verzweifelt, die Tabelle zum Scrollen zu überreden.
Mit Firefox und Chrome funktioniert es einwandfrei, aber Internet Explorer zeigt die gesamte Tabelle an.
So sieht es in Chrome aus:

Und so in IE:


Hier ist der Link zum Code im Tryit Editor: https://www.w3schools.com/code/tryit.asp?filename=GDD8ES4L9TRY

Könnt ihr mir bitte helfen? Ich hab mitlerweile keine Ahnung mehr was ich noch ausprobieren kann :-|

MfG; Frank

 

[MrMurphy]

Ich denke, du bist insgesamt auf dem falschen Weg.

Der Internetexplorer ging bis zur Version 11. Auf Grund der geringen Verbreitung ist es unsinnig, den noch zu unterstützen. Genau so wenig wie den IE10, IE9, IE8, ...

So wie du die Tabelle (wenn auch ohne Inhalt) präsentierst, mißbrauchst du die wahrscheinlich zum Layouten. Die Zeiten dafür sind aber bereits seit 20 Jahren vorbei. Nutze geeignete Elemente für das Layout, nicht Tabellen.

 

[FrankButcher]

Wir müssen leider Internet Explorer unterstützen, weil das leider immer noch der Haupt-Browser in unserer Firma ist :-(

Die Tabelle wird aus der Datenbank befüllt und erlaubt Usern unterschiedliche Elemente auszuwähln. Das heißt der Inhalt vom grünen div ("Some stuff") wird per AJAX upgedated, je nachdem welches "Bla" Element der User angeklickt hat.

Wie würdest du die Bla-Tabelle generieren / rendern, wenn nicht als Tabelle?

 

[MrMurphy]

Sind die Farben wichtig oder hast du die nur zur besseren Ansicht bei der Erstellung der Seite eingefügt?

Besser sind die üblichen HTML-Container, außerdem würde das den Quelltext verschlanken und deutlich übersichtlicher machen. Ich versuche mal was zu erstellen.

Nachtrag:

Im Firefox wird die Tabelle auch wie im IE angezeigt.

Mit deinen Angaben könnte ich mir folgendes HTML vorstellen:

<article class="auswahl">
   <section>
      <p>Some Stuff</p>
   </section>
   <section>
      <div>
         <h2>Some other Stuff</h2>
      </div>
      <div>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
         <p>Bla</p>
      </div>
   </section>
</article>

Schon mal deutlich übersichtlicher und pflegeleichter als ein Tabellenkonstrukt.

Dazu das folgende CSS:

header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
   display: block;
}
.auswahl {
   background-color: gold;
   width: 300px;
   height: 300px;
   border: 1px solid red;
   margin: 10px;
   display: flex;
}
.auswahl>section {
   width: 50%;
   border: 1px solid black;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 50%;
}
.auswahl>section:nth-child(2) {
   display: flex;
   flex-direction: column;
}
.auswahl>section:nth-child(2) div {
}
.auswahl>section:nth-child(2) div:nth-child(2) {
   overflow-y: scroll;
   max-height: 100%;
}
.auswahl>section:nth-child(2) div:nth-child(2) p {
   background-color: yellow;
   text-align: center;
   width: 50%;
   padding: 0.5rem 0rem;
   border: 1px solid black;
   margin: 0.5rem auto;
}

 

[FrankButcher]

Super, merci :-D
Mit den neuen CSS Sachen hab ich mich noch gar nicht beschäftigt, glaub es ist allerhöchste Zeit.
Wir arbeiten auch immer noch an einer firmainternen ASP.NET Application, die über die letzten 15 Jahre stetig gewachsen ist; da haben wir bis jetzt gar kein gescheites Framework um solche Elemente im Code-Behind generisch zu generaten.

Na gut, ich stürz mich mal auf ein paar Tutorials bzgl articles und flex. Vielen lieben Dank nochmal :-)