Problem mit visibility collapse und overflow

[steffen]

Hallo Community,

ich möchte gerne eine tabelle in einem div mit overflow packen, jedoch manche Zeilen nicht anzeigen lassen, jedoch die Breite beibehalten.
Gefunden habe ich dies mit visibility: collapse, jedoch hat es den nachteil, dass nun unter der Tabelle die felder irgendwie rangehängt werden, jedoch die tabelle kleiner ist.

Schwer zu erklären ... habe jedoch ein Beispiel:

<div style="overflow-y: scroll; height: 100px; border: 1px red solid;">  
<table cellspacing="1" cellpadding="2" class="" id="myScrollTable" style="border: 1px red solid; margin: 0; padding: 0;">  
  
		<tr style="visibility: collapse;">  
			<th class="c1">Name</th>  
			<th class="c2">SurenameSurenameSurenameSurenameSurename</th>  
			<th class="c3">Age</th>  
		</tr>  
		<tr style="visibility: collapse;">  
			<td class="c1">John</th>  
			<td class="c2">Smith</th>  
			<td class="c3">30</th>  
		</tr>  
		<tr class="r2">  
			<td class="c1">John</th>  
			<td class="c2">Smith</th>  
			<td class="c3">31</th>  
		</tr>  
		<tr class="r1">  
			<td class="c1">John</th>  
			<td class="c2">Smith</th>  
			<td class="c3">32</th>  
		</tr>  
		<tr class="r2">  
			<td class="c1">John</th>  
			<td class="c2">Smith</th>  
			<td class="c3">33</th>  
		</tr>  
		<tr class="r1">  
			<td class="c1">John</th>  
			<td class="c2">Smith</th>  
			<td class="c3">34</th>  
		</tr>  
		<tr class="r2">  
			<td class="c1">John</th>  
			<td class="c2">Smith</th>  
			<td class="c3">35</th>  
		</tr>  
		<tr class="r1">  
			<td class="c1">John</th>  
			<td class="c2">Smith</th>  
			<td class="c3">36</th>  
		</tr>  
		<tr class="r2">  
			<td class="c1">John</th>  
			<td class="c2">Smith</th>  
			<td class="c3">37</th>  
		</tr>  
</table>  
</div>

Hat jemand eine Idee, wie ich diesen weißen Teil wegbekomme, wenn man ans Ende scrollt?

mfg Steffen