Struts Spalten fixieren

J

Jane18

Mitglied
Hi,

ich hab folgendes Problem. Ich möchte die erste Spalte einer langen, und sehr breiten Tabellen fixieren, sodass diese beim scrollen immer sichtbar bleibt.

Aktuell ist meine Tabelle mit HTML aufgebaut, weil diese nicht zeilenweise, sondern spaltenweise aufgebaut ist. Sprich der Tabellenkopf ist links und pro Datensatz kommt eine neue Spalte hinzu.
Hier meine erste Frage: Gibt es für display:table auch ein Attribut was das "Drehen" der Tabelle zuläst?

Und dann natürlich mein größtest Problem: die Fixierung.
Gibt es da eine "schöne" Lösung mit Struts? Ich habe schon auf diversen Seiten durchgelesen, habe bis jetzt aber keine Lösung finden können. Die Frame-Lösung von Übergroße Tabellen in koordiniert scrollenden Frames finde ich nicht wirklich toll gelöst und ich weis nicht, ob diese auch bei dynamischen Tabellen funktioniert bzw. ob meine Actions danach noch funktionieren...

Kann mir jemand weiterhelfen?
 
Benutzt Du div's und span's mit css-Attribut display:table? Oder ist es eine echte HTML-Table mit tr's und td's?
 
Ok, ich dachte, ich zauber mal schnell was mit css position:fixed. Geht aber doch nicht so einfach. Noch etwas Geduld bitte...
 
Das kannste mal als Anstoß nehmen:
HTML: 
<!DOCTYPE html> 
<html> 
<head><title>testdoc</title> 
<style type="text/css"> 
  body {
   overflow-x: hidden;
  } 
  div.container { 
     width: 90%;  
     overflow-x:scroll;   
     overflow-y:visible;
     margin-left: 4.5em;
  }
 
  td.label {
    font-weight: bold;
    text-align: right;
    background: grey;
    border-bottom: solid 1px black;
    margin: 0px;
    position:absolute;   
    left:0;
    top:auto;
    width: 5em;   
  }

  td.value {
    border-bottom: solid 1px black;
    border-left: dotted 1px black;
  }
   
</style> 
</head> 
<body> 
<div class="container">
  <table class="data-table"> 
    <tr>
      <td class="label">Datum:</td>
      <td class="value">21.06.2012</td>
      <td class="value">22.06.2012</td>
      <td class="value">23.06.2012</td>
      <td class="value">24.06.2012</td>
      <td class="value">25.06.2012</td>
      <td class="value">26.06.2012</td>
      <td class="value">27.06.2012</td>
      <td class="value">28.06.2012</td>
      <td class="value">29.06.2012</td>
      <td class="value">30.06.2012</td>
      <td class="value">01.07.2012</td>
      <td class="value">02.07.2012</td>
      <td class="value">03.08.2012</td>
      <td class="value">04.09.2012</td>
      <td class="value">05.10.2012</td>
      <td class="value">06.11.2012</td>
      <td class="value">07.12.2012</td>
      <td class="value">08.13.2012</td>
    </tr> 
    <tr>
      <td class="label">Messwert:</td>
      <td class="value">17</td>
      <td class="value">33</td>
      <td class="value">0</td>
      <td class="value">17</td>
      <td class="value">33</td>
      <td class="value">0</td>
      <td class="value">17</td>
      <td class="value">33</td>
      <td class="value">0</td>
      <td class="value">17</td>
      <td class="value">33</td>
      <td class="value">0</td>
      <td class="value">17</td>
      <td class="value">33</td>
      <td class="value">0</td>
      <td class="value">17</td>
      <td class="value">33</td>
      <td class="value">0</td>
    </tr>  
  </table>
</div> 
</body> 
</html>
Getestet mit IE9. Musste nochma mit anderen Browsern testen. Crossbrowser-Publishing ist halt Fummelkram. Hier ein Link zur besten deutschsprachigen CSS-Doku: SELFHTML: Stylesheets (CSS)
 
Der Denkanstoß hat weitergeholfen :toll:

Ich habe die Tabelle jetzt mit Div's gebaut und per JS ein paralleles Scrollen realisiert. Ist nicht besonders schön, aber selten...

Vielleicht hat jemand noch einen Tipp für mich.

HTML: 
<!DOCTYPE html> 
<html> 
<head><title>testdoc</title> 
<script type="text/javascript">
function scrollLabels(element){
	var left = element.scrollLeft;
    var top = element.scrollTop;
	var header = document.getElementById("header");
	
	if(header != null) {
		header.scrollTop = top;
	}
}
</script>
<style type="text/css"> 
body {
	overflow-x: hidden;
} 

div.container { 
	width: 80%;  
	overflow-x:scroll;   
	overflow-y:visible;
	margin-left: 10em;
	height: 30em;
}
.data-table {
	position: relative;
	display: table;
	height: 100%;
}
.tr{
	display: table-row;
	z-index: 10;
}
.td{
	height: 10em;
	display: table-cell;
}
.th {
	display: table-header-group;
	position: fixed;
	height: 30em;
	overflow-x: scroll;
	overflow-y: scroll;
	left:0;
	background-color: rgba(255, 90, 65,0.5);
	z-index: 0;
}

.label {
	/*position:fixed;  */
	font-weight: bold;
	text-align: right;
	
	border-bottom: solid 1px black;
	margin: 0px;
	left:0;
	top:auto;
	width: 10em;
	height: 10em;
}

.td.value, .td.value1 {
	border-bottom: solid 1px black;
	border-left: dotted 1px black;
}
</style> 
</head> 
<body> 
<div class="container"  onscroll="scrollLabels(this)">
  <div class="data-table"> 
	<div class="th" id="header">
		<div class="label">Datum:</div>
		<div class="label">Messwert:</div>
		<div class="label">tilger:</div>
		<div class="label">motor:</div>
		<div class="label">Getriebebaustufe:</div>
	</div>
    <div class="tr">
      <div class="td value1">21.06.2012</div>
      <div class="td value">22.06.2012</div>
      <div class="td value">23.06.2012</div>
      <div class="td value">24.06.2012</div>
      <div class="td value">25.06.2012</div>
      <div class="td value">26.06.2012</div>
      <div class="td value">27.06.2012</div>
      <div class="td value">28.06.2012</div>
      <div class="td value">29.06.2012</div>
      <div class="td value">30.06.2012</div>
      <div class="td value">01.07.2012</div>
      <div class="td value">02.07.2012</div>
      <div class="td value">03.08.2012</div>
      <div class="td value">04.09.2012</div>
      <div class="td value">05.10.2012</div>
      <div class="td value">06.11.2012</div>
      <div class="td value">07.12.2012</div>
      <div class="td value">08.13.2012</div>
    </div> 
    <div class="tr">
      <div class="td value1">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
    </div>
	<div class="tr">
      <div class="td value1">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
    </div>
	<div class="tr">
      <div class="td value1">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
    </div>	
	<div class="tr">
      <div class="td value1">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
      <div class="td value">17</div>
      <div class="td value">33</div>
      <div class="td value">0</div>
    </div>	
  </div>
</div> 
</body> 
</html>
 
Wenn ich links scrolle, dann bewegt sich nur die linke Spalte hoch und runter, wenn ich rechts scrolle, dann die gesamte Tabelle. Ist das so gewollt? (Firefox 14.0.1)
 
Irgendwie bringt mich das ganze nicht weiter. Die "fixe" Position der ersten Spalte ist nicht zielführend, weil vor der Tabelle noch ein haufen andere HTML Code steht und ich unterschiedliche Zeilenhöhen habe.

Gibt es keine Möglichkeit eine display:table einfach um 90° zu kippen? Sodass die Tabelle Spaltenweise gefüllt wird?
 

Aktuelle Jobs

Neue Themen

Ähnliche Themen

JTable: Spalten & Zellen fixieren wie in Excel
Antworten: 4
JTable - Spalten fixieren
Antworten: 11
Hintergrundbild in JTextPane fixieren
Antworten: 2
JFrame fixieren
Antworten: 4
JSplitPane beide Seiten fixieren
Antworten: 2

Zurück
Oben