Folgende Anforderung: Ich möchte in einer Tabelle, die über die gesamte Bildschirmbreite geht, den Inhalt einer Zelle scrollbar haben.
Mein Ansatz: Ich mache in die Tabellenzelle ein DIV mit Overflow:auto
Problem: Das funktioniert zwar im FireFox, aber nicht im IE. Der IE geht wohl her und schaut sich den Inhalt des DIVs an und macht die Tabelle dann so breit, dass der gesamte Inhalt reinpasst und berücksichtigt dabei nicht, dass das DIV ja auch scrollen könnte. Dieser Effekt tritt auf, wenn das DIV eine prozentuale Breite hat.
Folgender Code verdeutlichd das Problem. Das obere DIV verhällt sich korrekt, da es nicht in eine Tabelle eingebettet ist. Bei den unteren beiden tritt aber das beschriebene Problem auf.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ValuePlanner_2008.Web.ProductArea.WebForm1" %>
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 100%; overflow: auto">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
<br />
</div>
<script language="javascript" type="text/javascript"> 1:
2: function fnRefreshScrollPosition(source)
3: { 4: document.getElementById("staticUnits").scrollLeft = source; 5: }
6:
</script>
<div style="width: 100%">
<table style="width: 100%">
<tr>
<td style="width: 100%; height: 50px;">
<div id="staticUnits" style="width: 100%; overflow: auto;">
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />
<br />
</div>
</td>
</tr>
</table>
<table style="width: 100%">
<tr>
<td style="width: 100%; height: 50px;">
<div id="units" style="width: 100%; overflow: auto;" onscroll="fnRefreshScrollPosition(this.scrollLeft);">
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br />
<br />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Lösung 1:
Ich kann den DIVs eine feste Breite geben. Aber eigentlich will ich ja, dass der gesamte zur Verfügung stehende Platz genutzt wird und wenn dieser nicht ausreicht gescrollt wird. Um das zu erreichen müsste ich über ein Resitze-Event die Breite der Tabellenzeile ermitteln und diese dann jedesmal auf die DIVs anwenden. Das wird aber schnell sehr hässlich wenn Margins etc. mit berücksichtigt werden müssen.
Lösung 2:
Ich positioniere die DIVs einfach absolut. Dann werden Sie nicht mehr als Inhalt der Tabelle berücksichtigt und die Tabelle erstreckt sich über genau 100% der Breite. Gut nutzen kann man hier den Effekt, dass die Positionsangaben bei absoluter Poistionierung sich immer auf den Container, also in unserem Fall auf die Tabellenzelle beziehen. Ein Stolperstein dabei ist, dass das DIV natürlich auch keinen Einfluss mehr auf die Höhe der Tabellenzelle hat. Diese muss man nun explizit angeben, ich habe da einfach mal 50px vorgegeben. Der Code sieht dann so aus. Hier scrollen nun alle 3 DIVs wie gewünscht.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ValuePlanner_2008.Web.ProductArea.WebForm1" %>
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 100%; overflow: auto">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
<br />
</div>
<script language="javascript" type="text/javascript"> 1:
2: function fnRefreshScrollPosition(source)
3: { 4: document.getElementById("staticUnits").scrollLeft = source; 5: }
6:
</script>
<div style="width: 100%">
<table style="width: 100%">
<tr>
<td style="width: 100%; height: 50px;">
<div id="staticUnits" style="width: 100%; overflow: auto; position: absolute">
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br />
<br />
</div>
</td>
</tr>
</table>
<table style="width: 100%">
<tr>
<td style="width: 100%; height: 50px;">
<div id="units" style="width: 100%; overflow: auto; position: absolute;" onscroll="fnRefreshScrollPosition(this.scrollLeft);">
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br />
<br />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>