Was tun, wenn wegen display: inline die Höhe eines Elements nicht eingestellt werden kann?

pkm · 16.09.2021

Ich habe folgendes html / css:

HTML:

 <!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color:black;
}

a {
       color:white;
       font-size:15px;
       text-decoration:none;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-left: 50px;
  padding:30px;  
  display:inline;
  color:black;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  width:600px;
  padding: 8px;
}

tr:nth-child(even) {
    background-color: lightblue;
}

tr:nth-child(odd) {
    background-color: white;
}

.topic {
  padding:30px;  
  display:inline;
  color:white;
}


.box{
       color:white;
       font-size:15px;
       padding:5px;
       background:black;
       width:98px;
       text-align:center;
}

     
.container {
       display:inline-flex;
       border:3px solid black;
       flex-direction:rows;
       flex-wrap:wrap;
       width:100%;
       background:black;
       align-content: flex-start;
       justify-content: space-between;
  }

.container2 {
  position:absolute;
  top:100px;
  width:100%;
}


.push {
       color:white;
       font-size:25px;
       padding:5px;
       background:black;
       width:70px;
       margin-left: auto;
}

</style>
</head>
<body>



      <div class = "container">
         <div class = "box"><a href="http://localhost/termine/">Termine</a></div>
         <div class = "box">foo</div>
         <div class = "box">bar</div>
         <div class = "box">lorem</div>
         <div class = "box">ipsum</div>
         <div class = "box">dolor</div>
         <div class = "box">sit</div>
         <div class = "box">amet</div>
      </div>

<div class="container2">
   <div class="topic">ÜBERSICHT</div>
 
   <table>
  <tr>
    <td>Eintrag</td>
  </tr>
  <tr>
    <td>Eintrag</td>
  </tr>
  <tr>
    <td>Eintrag</td>
  </tr>
  <tr>
    <td>Eintrag</td>
  </tr>
  <tr>
    <td>Eintrag</td>
  </tr>
  <tr>
    <td>Eintrag</td>
  </tr>
    <tr>
    <td>Eintrag</td>
  </tr>
  <tr>
    <td>Eintrag</td>
  </tr>
  <tr>
    <td>Eintrag</td>
  </tr>
  <tr>
    <td>Eintrag</td>
  </tr>
  <tr>
    <td>Eintrag</td>
  </tr>
  <tr>
    <td>Eintrag</td>
  </tr>
    <tr>
    <td>Eintrag</td>
  </tr>
  <tr>
    <td>Eintrag</td>
  </tr>
  <tr>
    <td>Eintrag</td>
  </tr>
</table>

</div>


</body>
</html>

Was ich jetzt erreichen will, ist folgendes. Ich möchte die Tabelle, wenn sie zu lang wird, vertikal scrollbar machen. Leider gelingt das mit folgendem css-Hack nicht:

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-left: 50px;
padding:30px;
display:inline;
color:black;
height:100px;
overflow-y: scroll;
}

"height" (und somit "overflow-y: scroll;") greift nicht, soweit ich weiß wegen display: inline. display: inline möchte ich aber behalten, da sonst die Anordnung der Tabelle sich verändert.

Nun meine Frage - wie kann ich dennoch erreichen, dass die Tabelle eine feste Höhe und mithin einen vertikalen Scrollbalken bekommt?

basti1012 · 18.09.2021

Alles Mist.
Feste positionen müssen raus.
Tabelle ist tabelle und kein inline-block.
Der Eine container mit inline-flex ist schwachsinn.
Kannst du mal erklären was in der Tabelle stehen soll ?
Vieleicht brauchst du ja keine Tabelle.
Gebe dein table mal nee feste höhe ,( zb 600px ) . Wenn dann mehr Inhalt kommt kann man auch Scrollen.Das sollte dann von alleine laufen wenn man nicht hidden gesetzt hat.

Du solltest das alles nochmal richtig machen und mit Flexbox arbeiten.
Mach mal eine Skizze fertig , dann kann man dir auch besser helfen wie es richtig gemacht wird.

pkm · 18.09.2021

Vielen Dank für die Antwort - mit diesem css habe ich es nun lösen können, wobei sich die Tabelle nunmehr in gar keinem Container befindet:

CSS:

table {
  position: absolute;
  left: 300px;
  top: 150px;
  font-family: arial, sans-serif;
  width: 50%;
  color:black;
   overflow-y:scroll;
   height:345px;
   display:block;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  width:600px;
  padding: 8px;
}

basti1012 · 18.09.2021

Die Tabelle brauch ja auch in kein Container , die Tabelle ist ja so gesehen auch ein Container.
Was soll das eigentlich für nee Seite werden ?
Bis jetzt sieht es ja so aus, das auf responsives Design und Handys ges..... wird.
Deine feste positionen sind Mist , damit bekommt man kein responsives Design , für alle Endgeräte hin.

Nutze konsequent nur Flexbox , dann sieht das nachher super aus