4
Spaltenbreite an Spalte von anderen Tabelle anpassen
Guten Tag also ich habe im Endeffekt folgendes vor.
Ich möchte eine Tabelle machen als festen Tabellenkopf und eine 2.Tabelle wo der Inhalt enthalten ist und wenn mehr Inhalt drinne ist, als auf den Bildschirm passt, soll ein Scrollblaken erscheinen , dass man den Inhalt hoch und runter scrollen kann ohne das der Tabellenkopf mit gescrollt wird.
Nun habe ich folgendes Problem ich lese den Inhalt aus einer Datenbank mit Hilfe von JSP(JAVA) dateien aus und wenn der Inhalt breiter ist als die Spalten vergrößert sich die Spalte automatisch (solange keine Leerzeichen enthalten sind, aber die sind auf jedenfall nicht da, da ich diese "verboten" habe) und da es ja 2 extra Tabellen sind verschiebt sich nur die eine Spalte von der unteren Tabelle und die obere bleibt gleich.
Nun zu meiner Frage:
Ist es möglich, dass ich eine Standartspaltenbreite für Beide festleg und wenn sich die Spaltenbreite von der unteren Tabelle ändert sich die Spaltenbreite von der oberen automatisch auch mit ändert ?
Mein Quelltext bis jetzt:
Ich möchte eine Tabelle machen als festen Tabellenkopf und eine 2.Tabelle wo der Inhalt enthalten ist und wenn mehr Inhalt drinne ist, als auf den Bildschirm passt, soll ein Scrollblaken erscheinen , dass man den Inhalt hoch und runter scrollen kann ohne das der Tabellenkopf mit gescrollt wird.
Nun habe ich folgendes Problem ich lese den Inhalt aus einer Datenbank mit Hilfe von JSP(JAVA) dateien aus und wenn der Inhalt breiter ist als die Spalten vergrößert sich die Spalte automatisch (solange keine Leerzeichen enthalten sind, aber die sind auf jedenfall nicht da, da ich diese "verboten" habe) und da es ja 2 extra Tabellen sind verschiebt sich nur die eine Spalte von der unteren Tabelle und die obere bleibt gleich.
Nun zu meiner Frage:
Ist es möglich, dass ich eine Standartspaltenbreite für Beide festleg und wenn sich die Spaltenbreite von der unteren Tabelle ändert sich die Spaltenbreite von der oberen automatisch auch mit ändert ?
Mein Quelltext bis jetzt:
<table cellspacing="1" style="margin: 0px; width: 95%">
<colgroup>
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Inhalt vorher</th>
<th><input type="checkbox" class="checkbox" name="Auswahl"
value="Inhalt1" /></th>
<th><input type="checkbox" class="checkbox" name="Auswahl"
value="Inhalt2" /></th>
<th><input type="checkbox" class="checkbox" name="Auswahl"
value="Inhalt3" /></th>
</tr>
</thead>
</table>
<div style="overflow: scroll; height: 380px">
<table cellspacing="1" style="margin: 0px; width: 95%">
<colgroup>
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
</colgroup>
<tbody>
<tr>
<td></td>
<td></td>
<td>Inhalt1</td>
<td>Inhalt2</td>
<td>Inhalt3</td>
</tr>
<tr>
<td>Mustername1</td>
<td></td>
<c:forEach items="${InhaltCommand.name}" var="test">
<td><c:out value="${test.Werte1}" /></td>
</c:forEach>
</tr>
<tr>
<td>Mustername2</td>
<td></td>
<c:forEach items="${InhaltCommand.name}" var="test">
<td><c:out value="${test.Werte2}" /></td>
</c:forEach>
</tr>
<tr>
<td>Mustername3</td>
<td></td>
<c:forEach items="${InhaltCommand.name}" var="test">
<td><c:out value="${test.Werte3}" /></td>
</c:forEach>
</tr>
</tbody>
</table>
</div>
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 94461
Url: https://administrator.de/contentid/94461
Ausgedruckt am: 22.11.2024 um 10:11 Uhr
4 Kommentare
Neuester Kommentar
Hallo MTB4ever.
Das Problem habe ich jetzt leider noch nicht so ganz richtig verstanden verstanden. Wie sieht den so eine mögliche Spaltenausgabe aus?
Tschau Fritzchen
Das Problem habe ich jetzt leider noch nicht so ganz richtig verstanden verstanden. Wie sieht den so eine mögliche Spaltenausgabe aus?
Tschau Fritzchen
Wenn der Inhalt mehr ist als die Spalte reinpasst vergrößert sich die Spalte automatisch und da es ja 2 extra Tabellen sind verschiebt sich nur die eine Spalte von der unteren Tabelle und die obere bleibt gleich.
Hallo MTB4ever.
Hm, vielleicht wenn du es über eine ID versuchst.
Hier mal ein Beispiel
ungetestet)
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function gleichbreit(){
var y = document.getElementById("a").offsetWidth;
var z = document.getElementById("b").offsetWidth;
if(y < z)
{
document.getElementById("a").style.width = z-4;
}
}
//-->
</SCRIPT>
</head>
<body onload="gleichbreit()">
<table border="1">
<colgroup>
<col width="200">
</colgroup>
<tr><td id="a">Hansi</td></tr>
<tr><td id="a">Willi</td></tr>
<tr><td id="a">Manni</td></tr>
</table>
<hr>
<table border="1">
<colgroup>
<col width="300">
</colgroup>
<tr><td id="b">Hansi</td></tr>
<tr><td id="b">Willi</td></tr>
<tr><td id="b">Manni</td></tr>
</table>
Vielleicht hilft dir das ja schon mal etwas weiter.
Tschau Fritzchen
Hm, vielleicht wenn du es über eine ID versuchst.
Hier mal ein Beispiel
ungetestet)<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function gleichbreit(){
var y = document.getElementById("a").offsetWidth;
var z = document.getElementById("b").offsetWidth;
if(y < z)
{
document.getElementById("a").style.width = z-4;
}
}
//-->
</SCRIPT>
</head>
<body onload="gleichbreit()">
<table border="1">
<colgroup>
<col width="200">
</colgroup>
<tr><td id="a">Hansi</td></tr>
<tr><td id="a">Willi</td></tr>
<tr><td id="a">Manni</td></tr>
</table>
<hr>
<table border="1">
<colgroup>
<col width="300">
</colgroup>
<tr><td id="b">Hansi</td></tr>
<tr><td id="b">Willi</td></tr>
<tr><td id="b">Manni</td></tr>
</table>
Vielleicht hilft dir das ja schon mal etwas weiter.
Tschau Fritzchen
Ich habs mal getestet, bzw mein Script nach der Inspiration von Fritzchen.
Aber erstmal:
SelfHTML - Übersicht der Universalattribute
Und hier mein Erzeugnis:
Schönes Wochenende noch
~Arano
PS: Das ist übrigens eine super Idee !
Aber erstmal:
SelfHTML - Übersicht der Universalattribute
ID - Ein dateiweit eindeutiger Bezeichnername für ein Element - wenn Sie Elemente damit auszeichnen, sollten Sie keinen id-Namen innerhalb einer HTML-Datei mehr als einmal vergeben.
Und hier mein Erzeugnis:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>testseite</title>
<script type="text/javascript">
<!--
function setTableWidth(){
var tab_2_col_1 = document.getElementById('tab_2_col_1').offsetWidth;
var tab_2_col_2 = document.getElementById('tab_2_col_2').offsetWidth;
var tab_2_col_3 = document.getElementById('tab_2_col_3').offsetWidth;
document.getElementById('tab_1_col_1').style.width = tab_2_col_1+'px';
document.getElementById('tab_1_col_2').style.width = tab_2_col_2+'px';
document.getElementById('tab_1_col_3').style.width = tab_2_col_3+'px';
}
-->
</script>
</head>
<body onload="setTableWidth()">
<table>
<tr>
<td id="tab_1_col_1">Spalte 1</td>
<td id="tab_1_col_2">Spalte 2</td>
<td id="tab_1_col_3">Spalte 3</td>
</tr>
</table>
<div style="height:100px; overflow:auto;">
<table>
<tr>
<td id="tab_2_col_1">asdasdasd</td>
<td id="tab_2_col_2">asdasdasd</td>
<td id="tab_2_col_3">asdasdasd</td>
</tr>
<tr>
<td>asdasdasd</td>
<td>asdasdasdasdasdasd</td>
<td>asdasdasd</td>
</tr>
<tr>
<td>asdasdasd</td>
<td>asdasdasd</td>
<td>asdasdasd</td>
</tr>
<tr>
<td>asdasdasd</td>
<td>asdasdasd</td>
<td>asdasdasdasdasdasdasdasdasd</td>
</tr>
<tr>
<td>asdasdasd</td>
<td>asdasdasd</td>
<td>asdasdasd</td>
</tr>
<tr>
<td>asdasdasd</td>
<td>asdasdasd</td>
<td>asdasdasd</td>
</tr>
<tr>
<td>asdasdasd</td>
<td>asdasdasd</td>
<td>asdasdasd</td>
</tr>
<tr>
<td>asdasdasd</td>
<td>asdasdasd</td>
<td>asdasdasd</td>
</tr>
<tr>
<td>asdasdasd</td>
<td>asdasdasd</td>
<td>asdasdasd</td>
</tr>
</table>
</div>
</body>
</html>Schönes Wochenende noch
~Arano
PS: Das ist übrigens eine super Idee !
