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?
 
N

nillehammer

Gast
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?
 
N

nillehammer

Gast
Ok, ich dachte, ich zauber mal schnell was mit css position:fixed. Geht aber doch nicht so einfach. Noch etwas Geduld bitte...
 
N

nillehammer

Gast
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)
 
J

Jane18

Mitglied
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>
 
F

Fant

Bekanntes Mitglied
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)
 
J

Jane18

Mitglied
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?
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
E Wie kann ich dynamische HTML- Tabellen(-spalten) mit JSP aus SELECT-Anweisung erstellen? Web Tier 2

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben