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

Diskutiere Was tun, wenn wegen display: inline die Höhe eines Elements nicht eingestellt werden kann? im HTML Forum im Bereich Programmierung; Ich habe folgendes html / css: <!DOCTYPE html> <html> <head> <style> body { background-color:black; } a { color:white...
P

pkm

Member
Dabei seit
28.09.2020
Beiträge
5
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

basti1012

Well-known member
Dabei seit
12.06.2018
Beiträge
138
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.
 
P

pkm

Member
Dabei seit
28.09.2020
Beiträge
5
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

basti1012

Well-known member
Dabei seit
12.06.2018
Beiträge
138
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
 
Thema:

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

Oben