steffen: Problem mit visibility collapse und overflow

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

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

    Du weisst schon, dass visible durchaus den Platz reserviert. Aerbeite also mit display.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Hallo Beat,

      bei Display habe ich aber den Nachteil, dass die Breite nicht "reserviert" wird.

      Gibt es dafür eine Möglichkeit?

      1. bei Display habe ich aber den Nachteil, dass die Breite nicht "reserviert" wird.

        Gibt es dafür eine Möglichkeit?

        Ja. Nutze den Vorrat der Tabellenelemente.

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        1. Hallo Beat,

          ich verstehe leider nicht was du meinst :(

          1. Hallo Beat,

            ich verstehe leider nicht was du meinst :(

            Dann hast du den Zweck einiger Tabellenelemente noch nicht erfasst. Du willst das nachholen.

            mfg Beat

            --
            ><o(((°>           ><o(((°>
               <°)))o><                     ><o(((°>o
            Der Valigator leibt diese Fische
            1. Hallo Beat,

              kannst du mir nicht einfach nen tip geben?

              Was willst du jetzt hören nutze Tabellen schon seit Jahren und auch andere Programmierer wissen dort nicht weiter..

              mfg steffen

            2. jedenfalls steht hier http://de.selfhtml.org/html/tabellen/aufbau.htm@title=http://de.selfhtml.org/html/tabellen/aufbau.htm nichts drin, was mir weiterhelfen könnte.

              mfg

              1. jedenfalls steht hier http://de.selfhtml.org/html/tabellen/aufbau.htm@title=http://de.selfhtml.org/html/tabellen/aufbau.htm nichts drin, was mir weiterhelfen könnte.

                Du willst die Breite vordefinieren. Genau hierfür gibt es dort Elemente zur Spaltendefinition.

                mfg Beat

                --
                ><o(((°>           ><o(((°>
                   <°)))o><                     ><o(((°>o
                Der Valigator leibt diese Fische
                1. Du willst die Breite vordefinieren. Genau hierfür gibt es dort Elemente zur Spaltendefinition.

                  Ich will die Breite nich vordefinieren. Ich will wie im Beispiel einfach die ersten 2 Zeilen ausblenden jedoch die Breite beibehalten.

                  mfg

                  1. Du willst die Breite vordefinieren. Genau hierfür gibt es dort Elemente zur Spaltendefinition.

                    Ich will die Breite nich vordefinieren. Ich will wie im Beispiel einfach die ersten 2 Zeilen ausblenden jedoch die Breite beibehalten.

                    Na dann verszuche mal die height zu manipulieren.

                    mfg Beat

                    --
                    ><o(((°>           ><o(((°>
                       <°)))o><                     ><o(((°>o
                    Der Valigator leibt diese Fische
                    1. Hallo Beat,

                      habe es nun geschafft.

                        
                      <div style="height: 100px; overflow-y: scroll"><table>  
                       <tr style="">  
                        <td style="padding: 0;"><div style="invisibility: collapse; height: 0;">mich kann man nicht sehen aber die breite bleibt!</div></td>  
                       </tr>  
                       <tr>  
                        <td>text</td>  
                       </tr>  
                       <tr>  
                        <td>texttext</td>  
                       </tr>  
                      </table></div>
                      

                      mfg steffen

                      1. Visibility natürlich :)

                        Hallo Beat,

                        habe es nun geschafft.

                        <div style="height: 100px; overflow-y: scroll"><table>
                        <tr style="">
                          <td style="padding: 0;"><div style="visibility: collapse; height: 0;">mich kann man nicht sehen aber die breite bleibt!</div></td>
                        </tr>
                        <tr>
                          <td>text</td>
                        </tr>
                        <tr>
                          <td>texttext</td>
                        </tr>
                        </table></div>

                        
                        >   
                        > mfg steffen