Hallo zusammen,
ich habe ein <table> in einem einem <div>. Die Tabelle wird per JavaScript initiiert. Sprich es werden <td>'s hinzugefügt. Ich habe folgende Anforderung. Die Tabellengröße kann je nach Parameter die größe des <div> überschreiten. In diesem Fall möchte ich dann im Div scrollen können um die gesamte tabelle sehen zu können.
Hier habe ich einige css-Klassen definiert:
Außerdem natürlich der JS-Code zum Befüllen der Tabelle:
Und natürlich der HTML-Teil selbst:
Fügt man das Ganze in JSFiddle ein, funktioniert alles ohne Probleme egal wieviele rows/cols ich anlege. Setze ich jetzt z.B. rows = 3 und cols = 7, wird das ebenfalls korrekt von JSFiddle dargestellt.
Jetzt habe ich den Spaß online gestellt und egal welchen Browser ich benutze die Breite der <td>'s wird ständig an das div angepasst, siehe hier.
Woran könnte das liegen?
Gruß,
Käsebrot
ich habe ein <table> in einem einem <div>. Die Tabelle wird per JavaScript initiiert. Sprich es werden <td>'s hinzugefügt. Ich habe folgende Anforderung. Die Tabellengröße kann je nach Parameter die größe des <div> überschreiten. In diesem Fall möchte ich dann im Div scrollen können um die gesamte tabelle sehen zu können.
Hier habe ich einige css-Klassen definiert:
HTML:
td {
border: 1px solid black;
height: 50px;
min-width: 50px;
}
table {
border-spacing: 0px;
}
.GridContainer {
height: 650px;
width: 1447px;
overflow: scroll;
}Außerdem natürlich der JS-Code zum Befüllen der Tabelle:
HTML:
var rows = 500;
var cols = 500;
PopulateGrid();
function PopulateGrid() {
var table = document.getElementById("GridTable");
for (i = 0; i < rows; i++) {
var tr = document.createElement('TR');
for (j = 0; j < cols; j++) {
var td = document.createElement('TD')
tr.appendChild(td);
}
table.appendChild(tr);
}
}Und natürlich der HTML-Teil selbst:
HTML:
<head runat="server">
<title></title>
</head>
<body>
<form method="post" id="form1">
<div class="GridContainer">
<table id="GridTable"></table>
</div>
<form>
</body>Fügt man das Ganze in JSFiddle ein, funktioniert alles ohne Probleme egal wieviele rows/cols ich anlege. Setze ich jetzt z.B. rows = 3 und cols = 7, wird das ebenfalls korrekt von JSFiddle dargestellt.
Jetzt habe ich den Spaß online gestellt und egal welchen Browser ich benutze die Breite der <td>'s wird ständig an das div angepasst, siehe hier.
Woran könnte das liegen?
Gruß,
Käsebrot
