nicht angemeldet
Probleme mit scrollbarem tbody.
0 
Struppi
Probleme mit scrollbarem tbody.
Hallo,
im Moment versuche ich einer Tabelle einen scrollbaren tbody zu verpassen, was auch irgendwie gelungen ist. Nur verhält sich die Tabelle so, als wäre der tbody nicht scrollbar. Das heißt: Die Rahmen um die Tabellenzellen werden unter der Tabelle angezeigt. Diese wird dadurch größer. Egal was ich anpasse, nichts hilft weiter. Es wird höchstens noch schlimmer. Anfangs teste ich nur im Fx 3.5.
Siehe Bild: http://http://img8.imageshack.us/img8/7190/testka.png
Wäre toll, wenn mir jemand weiter helfen könnte.
Viele Grüße
Marcus
Hier der vereinfachte Testfall:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title></title>
<style type="text/css">
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
tbody { height: 5em; overflow: auto; overflow-x: hidden; }
td { border: 1px solid grey; width: 10%; }
</style>
</head>
<body>
<table>
<thead><tr>
<th>a</th>
<th>a</th>
<th>a</th>
<th>a</th>
<th>a</th>
<th>a</th>
</tr></thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</tbody>
</table>
</body>
</html>
-
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
Wenn du die collapse Angabe entfernst, dann geht's. Frag mich aber nicht warum.
Struppi.
-
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
Wenn du die collapse Angabe entfernst, dann geht's. Frag mich aber nicht warum.
Struppi.
Ja, du hast recht. Damit hätte ich nicht gerechnet. Jetzt muss ich mal suchen, wo dieses Problem herkommt. Vielen Dank für Deine Hilfe.
Marcus
-
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
Wenn du die collapse Angabe entfernst, dann geht's. Frag mich aber nicht warum.
Struppi.
Möglicherweise habe ich die Quelle des Problems gefunden. Der Konflikt zwischen den Zellen wird wohl nicht aufgelöst.
http://de.selfhtml.org/css/eigenschaften/tabellen.htm#border_collapse:
"Bei der Angabe collapse kommt es zu Konflikten zwischen Rahmenformatierungen einzelner Zellen. Rahmen, die dabei in jedem Fall Vorrang haben sollen und den gemeinsamen Grenzrahmen der Nachbarzelle überlagern sollen, müssen zu diesem Zweck die CSS-Angabe border-style:hidden erhalten. Rahmen, die in jedem Fall nachrangig sein sollen und von dem Grenzrahmen der Nachbarzelle überlagert werden sollen, müssen die CSS-Angabe border-style:none erhalten. Wenn keine der Zellen die Angabe border-style:hidden enthält, aber eine davon die Angabe border-style:none, entscheidet die Breitenangabe (border-width) zum Rahmen, welche Formatierung beim gemeinsamen Grenzrahmen Vorrang hat. Breitere Rahmen haben dann den Vorrang. Falls auch die Breitenangabe keine Konfliktlösung bringt, da die Breitenangaben gleich sind, dann entscheidet die folgende Reihenfolge von Rahmentypen (border-style:): double, solid, dashed, dotted, ridge, outset, groove, inset."-
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
Wenn du die collapse Angabe entfernst, dann geht's. Frag mich aber nicht warum.
Struppi.
Möglicherweise habe ich die Quelle des Problems gefunden. Der Konflikt zwischen den Zellen wird wohl nicht aufgelöst.
Ein <div style="overflow:hidden;"></div> um die Tabelle scheint das Problem zu beheben. Hier ein ähnlicher Fall: https://bugs.launchpad.net/firefox/+bug/235006. Es ensteht tatsächlich ein Overflow, weil der Scrollbalken ein Stück der Tabelle einnimmt.
-
-