Problem mit visibility collapse und overflow
steffen
- css
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
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
Hallo Beat,
bei Display habe ich aber den Nachteil, dass die Breite nicht "reserviert" wird.
Gibt es dafür eine Möglichkeit?
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
Hallo Beat,
ich verstehe leider nicht was du meinst :(
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
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
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
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
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
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
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
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