Auf Thema antworten

Beitrag

[QUOTE="pkm, post: 11994, member: 1869"]
Ich habe folgendes html / css:

[CODE=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> [/CODE]

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?
[/QUOTE]

Authentifizierung