basti1012.bplaced.net

Hallo, ich bin gerade am Erstellen einer Webseite. Folgendes Problem: Ich möchte gerne eine Tabelle, die einen gewissen Abstand nach oben hat. Beim Scrollen soll dann nicht nur der Header, sondern die ganze Tabelle "mitgehen". Leider bekomme ich dies nicht hin. Bei mir ist es immer so, dass sich dann alle Zeilen untereinander schieben und nicht die komplette Tabelle "mitgeht" sondern eben immer nur eine Zeile.

Code

                                    
                                <style>
  body{
    height:2000px;
  }
table  {
  margin-left:200px;
  margin-top:200px;
  }
table.scroll thead tr:after {
	content: '';
	overflow-y: scroll;
	visibility: hidden;
}
table.scroll thead th {
	flex: 1 auto;
	display: block;
    background:#e7cd16;
  width:150px;
}
table.scroll tbody {
	display: block;
	width: 100%;
	overflow-y: auto;
	height: auto;
	max-height: 500px;
}
table.scroll thead tr,
table.scroll tbody tr {
	display: flex;
}
td ,th{
  flex:1;
	word-wrap: break;
  font-family:Arial, sans-serif;
  font-size:14px;
  padding:10px 5px;
  border:1px solid black;
}

</style>

<table class="scroll">
  <thead>
<tr>    
<th class="tg-jq4l">Header</th>    
<th class="tg-0div">Header</th>  
</tr>  
  </thead>
  <tbody>
<tr>   
<td class="tg-q64d">1</td>    
<td class="tg-031e">1</td>  
</tr>  
<tr>    
<td class="tg-q64d">2</td>    
<td class="tg-031e">2</td>  
</tr>  
<tr>    
<td class="tg-q64d">3</td>    
<td class="tg-031e">3</td>  
</tr>  
<tr>    
<td class="tg-031e">4</td>    
<td class="tg-031e">3</td>  
</tr>  <tr>    
<td class="tg-031e">5</td>    
<td class="tg-031e">5</td>  
</tr>
  <tr>   
<td class="tg-q64d">1</td>    
<td class="tg-031e">1</td>  
</tr>  
<tr>    
<td class="tg-q64d">2</td>    
<td class="tg-031e">2</td>  
</tr>  
<tr>    
<td class="tg-q64d">3</td>    
<td class="tg-031e">3</td>  
</tr>  
<tr>    
<td class="tg-031e">4</td>    
<td class="tg-031e">3</td>  
</tr>  
  <tr>    
<td class="tg-031e">5</td>    
<td class="tg-031e">5</td>  
</tr>
  <tr>   
<td class="tg-q64d">1</td>    
<td class="tg-031e">1</td>  
</tr>  
<tr>    
<td class="tg-q64d">2</td>    
<td class="tg-031e">2</td>  
</tr>  
<tr>    
<td class="tg-q64d">3</td>    
<td class="tg-031e">3</td>  
</tr>  
<tr>    
<td class="tg-031e">4</td>    
<td class="tg-031e">3</td>  
</tr>  <tr>    
<td class="tg-031e">5</td>    
<td class="tg-031e">5</td>  
</tr>
  <tr>   
<td class="tg-q64d">1</td>    
<td class="tg-031e">1</td>  
</tr>  
<tr>    
<td class="tg-q64d">2</td>    
<td class="tg-031e">2</td>  
</tr>  
<tr>    
<td class="tg-q64d">3</td>    
<td class="tg-031e">3</td>  
</tr>  
  <tr>   
<td class="tg-q64d">1</td>    
<td class="tg-031e">1</td>  
</tr>  
<tr>    
<td class="tg-q64d">2</td>    
<td class="tg-031e">2</td>  
</tr>  
<tr>    
<td class="tg-q64d">3</td>    
<td class="tg-031e">3</td>  
</tr>  
<tr>    
<td class="tg-031e">4</td>    
<td class="tg-031e">3</td>  
</tr>  <tr>    
<td class="tg-031e">5</td>    
<td class="tg-031e">5</td>  
</tr>
<tr>    
<td class="tg-031e">4</td>    
<td class="tg-031e">3</td>  
</tr>  <tr>    
<td class="tg-031e">5</td>    
<td class="tg-031e">5</td>  
</tr>
  </tbody>
</table>