# Table scrolling mit fixed header und fixed 1. Spalte



## ouzorider (1. Februar 2010)

Hallo liebe Forumsgemeinde,

ich habe folgendes Problem:

Ich möchte eine Tabelle machen, welche in x- und y-Richtung scrollbar ist. Wenn man in y-Richtung scrollt soll der Header stehen bleiben, wenn man in x-Richtung scrollt soll die 1. Spalte stehen bleiben. 
Bin schon das ganze Wochenende dran, komme aber momentan einfach nicht weiter. Momentan ist das vorhanden:


```
<div style="overflow-x:scroll;overflow-y:hidden; border:1px solid #ff0000; width:500px;">
										<div>
											<table cellpadding="0" cellspacing="0" style="table-layout:fixed;">
												<tr>
													<td style="width:120px;" class="table_header_key">2008e</td>
													<td style="width:120px;" class="table_header_key">2009e</td>
													<td style="width:120px;" class="table_header_key">2010e</td>
													<td style="width:120px;" class="table_header_key">2008e</td>
													<td style="width:120px;" class="table_header_key">2009e</td>
													<td style="width:120px;" class="table_header_key">2010e</td>
													<td style="width:120px;" class="table_header_key">2008e</td>
													<td style="width:120px;" class="table_header_key">2009e</td>
													<td style="width:120px;" class="table_header_key">2010e</td>
									        	</tr>	
									    	</table>
									  	</div>
										<div style="overflow-y:scroll; overflox-x:hidden; width:100%; height:300px;">
											<div>
												<table cellpadding="0" cellspacing="0" style="table-layout:fixed;">
													<tr>
														<td style="width:120px;" class="bg_blau_right">8,0</td>
													 	<td style="width:120px;" class="bg_blau_right">9,0</td>
													 	<td style="width:120px;" class="bg_blau_right">6,0</td>
													 	<td style="width:120px;" class="bg_blau_right">6,0</td>
													 	<td style="width:120px;" class="bg_blau_right">6,0</td>
													 	<td style="width:120px;" class="bg_blau_right">6,0</td>
													 	<td style="width:120px;" class="bg_blau_right">6,0</td>
													 	<td style="width:120px;" class="bg_blau_right">6,0</td>
													 	<td style="width:120px;" class="bg_blau_right">6,0</td>
													</tr>
												</table>
											</div>
										</div>
									</div>
```

Ich hoffe, ihr könnt mir helfen.

LG ouzorider


----------



## Maik (1. Februar 2010)

Hi,

schau mal hier: xTable -> *Demo 2*

mfg Maik


----------



## ouzorider (1. Februar 2010)

Super, danke.
Das funktioniert auf jeden Fall mal schon.

habe da aber jetzt auch noch ein Problem. Ich möchte die th noch gruperien.
D.h. ich habe z.B. 6 th, welche scrollen. Darüber sollen allerdings nochmal 2 td eingefuegt werden und mit colspan verbunden werden.
Das funktioniert aber nicht. Es wrid dann die th nicht mehr angezeigt.

Beispielcode:

```
<script type='text/javascript' src='js/x.js'></script>
<script type='text/javascript' src='js/xfirstchild.js'></script>

<script type='text/javascript' src='js/xnextsib.js'></script>
<script type='text/javascript' src='js/xtable.js'></script>
<script type='text/javascript'>

var xt1, xt2;

window.onload = function()
{
  xt2 = new xTable('table2', 'xtRoot', 'xtCaption', 'xtFzRow', 'xtFRInner', 'xtFRCell', 'xtFzCol', 'xtFCInner', 'xtFCCell', 'xtTblCon', 'xtCellTbl');
}
</script>

<style type='text/css'>
#leftColumn {
  width:94%;
}
.leftContent {
  padding:0;
}

/* xTable - static elements */

table.xTable, table.xTable caption, table.xTable thead, table.xTable tr, table.xTable tr th, table.xTable tr td {
  margin: 0;
  padding: 0;
}
table.xTable {
  border-collapse: collapse;
  text-align: center;
  background: #FFF;
}
table.xTable caption {
  padding: 3px 30px;
  font-size: larger;
  font-weight: bold;
  color: #FFF;
  /*background: #BF8660;
  border: 1px solid #596380;
  */
}
table.xTable thead {
  background: #CFD4E6;
}
table.xTable tr th {
  color: #000;
  font-weight: bold;
}
table.xTable tr td, table.xTable tr th {
  padding: 6px 20px;
  /*border: 1px solid #596380;*/
  text-align: center;
}

/* xTable - dynamically-created elements */

div.xtRoot { /* overall container */
  position: relative;
  height: 300px;
  /*border: 1px solid #596380;*/
  visibility: hidden;
  overflow: hidden;
  padding: 0;
  /*background: #596380;*/
}
div.xtFzRow, div.xtFzCol { /* frozen row and col containers */
  position:absolute;
  overflow: hidden;
  padding: 0;
  /*border: 1px solid #596380;*/
  background: transparent;
}
div.xtFzRow {
  z-index: 2;
}
div.xtFzCol {
  z-index: 1;
}
div.xtFRInner, div.xtFCInner {  /* frozen row and col inner containers, for simulated scrolling */
  position: absolute;
  overflow: hidden;
  margin:0;
  padding:0;
  background:transparent;
}
div.xtFRCell, div.xtFCCell { /* the individual cells in the frozen row and col */
  position: absolute;
  overflow: hidden;
  margin: 0;
  padding: 0;
 /* background: #CFD4E6;
  border: 1px solid #596380;
  */
}
table.xtCellTbl { /* the table in each cell, for vertical text alignment */
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
}
table.xtCellTbl tr {
  margin: 0;
  padding: 0;
  vertical-align: middle;
  text-align: center;
}
table.xtCellTbl td {
  margin: 0;
  padding: 8px;
  color: #000;
  font-weight: bold;
}
div.xtTblCon { /* container for the original table */
  position: absolute;
  overflow: scroll;
  padding: 0;
  z-index: 3;
  border: 1px solid #596380;
  background: transparent;
}
div.xtCaption { /* caption container */
  position: absolute;
  overflow: hidden;
  padding: 3px 10px;
  font-size: larger;
  font-weight: bold;
  color: #FFF;
  background: #BF8660;
  border: 1px solid #596380;
  text-align: center;
}

</style>
<table id='table2' class='xTable'>
	<thead>
		<tr>
			<td>&nbsp;</td>
			<td colspan="6">Spalte1</td>
<td colspan="6">Spalte1</td>
		</tr>
		<tr>
			<tr>
			<th class="table_header_key">&nbsp;</th>
			<th class="table_header_key">2008e</th>
			<th class="table_header_key">2009e</th>
			<th class="table_header_key">2010e</th>
			<th class="table_header_key">2008e</th>
			<th class="table_header_key">2009e</th>
			<th class="table_header_key">2010e</th>
			<th class="table_header_key">2008e</th>
			<th class="table_header_key">2009e</th>
			<th class="table_header_key">2010e</th>
			<th class="table_header_key">2008e</th>
			<th class="table_header_key">2009e</th>
			<th class="table_header_key">2010e</th>
			<th class="table_header_key">2008e</th>
			<th class="table_header_key">2009e</th>
			<th class="table_header_key">2010e</th>
		</tr>
	</thead>
	<tr>
		<td>Daimler</td>
		<td class="bg_hellblau">10,0&nbsp;%</td>
		<td class="bg_hellblau">90,0&nbsp;%</td>
		<td class="bg_hellblau">12,0&nbsp;%</td>
		<td class="bg_hellblau">15,7&nbsp;%</td>
		<td class="bg_hellblau">14,2&nbsp;%</td>
		<td class="bg_hellblau">12,0&nbsp;%</td>
		<td class="bg_hellblau">18,7&nbsp;%</td>
		<td class="bg_hellblau">9,0&nbsp;%</td>
		<td class="bg_hellblau">4,0&nbsp;%</td>
		<td class="bg_hellblau">5,0&nbsp;%</td>
		<td class="bg_hellblau">25,0&nbsp;%</td>
		<td class="bg_hellblau">4,0&nbsp;%</td>
		<td class="bg_hellblau">25,0&nbsp;%</td>
		<td class="bg_hellblau">3,5&nbsp;%</td>
		<td class="bg_hellblau">10,4&nbsp;%</td>
	</tr>
	<tr>
		<td>BMW</td>
		<td class="bg_weiss">10,0&nbsp;%</td>
		<td class="bg_weiss">90,0&nbsp;%</td>
		<td class="bg_weiss">12,0&nbsp;%</td>
		<td class="bg_weiss">15,7&nbsp;%</td>
		<td class="bg_weiss">14,2&nbsp;%</td>
		<td class="bg_weiss">12,0&nbsp;%</td>
		<td class="bg_weiss">18,7&nbsp;%</td>
		<td class="bg_weiss">9,0&nbsp;%</td>
		<td class="bg_weiss">4,0&nbsp;%</td>
		<td class="bg_weiss">5,0&nbsp;%</td>
		<td class="bg_weiss">25,0&nbsp;%</td>
		<td class="bg_weiss">4,0&nbsp;%</td>
		<td class="bg_weiss">25,0&nbsp;%</td>
		<td class="bg_weiss">3,5&nbsp;%</td>
		<td class="bg_weiss">10,4&nbsp;%</td>
	</tr>
	<tr>
		<td>Porsche</td>
		<td class="bg_hellblau">10,0&nbsp;%</td>
		<td class="bg_hellblau">90,0&nbsp;%</td>
		<td class="bg_hellblau">12,0&nbsp;%</td>
		<td class="bg_hellblau">15,7&nbsp;%</td>
		<td class="bg_hellblau">14,2&nbsp;%</td>
		<td class="bg_hellblau">12,0&nbsp;%</td>
		<td class="bg_hellblau">18,7&nbsp;%</td>
		<td class="bg_hellblau">9,0&nbsp;%</td>
		<td class="bg_hellblau">4,0&nbsp;%</td>
		<td class="bg_hellblau">5,0&nbsp;%</td>
		<td class="bg_hellblau">25,0&nbsp;%</td>
		<td class="bg_hellblau">4,0&nbsp;%</td>
		<td class="bg_hellblau">25,0&nbsp;%</td>
		<td class="bg_hellblau">3,5&nbsp;%</td>
		<td class="bg_hellblau">10,4&nbsp;%</td>
	</tr>
	<tr>
		<td>Volkswagen</td>
		<td class="bg_weiss">10,0&nbsp;%</td>
		<td class="bg_weiss">90,0&nbsp;%</td>
		<td class="bg_weiss">12,0&nbsp;%</td>
		<td class="bg_weiss">15,7&nbsp;%</td>
		<td class="bg_weiss">14,2&nbsp;%</td>
		<td class="bg_weiss">12,0&nbsp;%</td>
		<td class="bg_weiss">18,7&nbsp;%</td>
		<td class="bg_weiss">9,0&nbsp;%</td>
		<td class="bg_weiss">4,0&nbsp;%</td>
		<td class="bg_weiss">5,0&nbsp;%</td>
		<td class="bg_weiss">25,0&nbsp;%</td>
		<td class="bg_weiss">4,0&nbsp;%</td>
		<td class="bg_weiss">25,0&nbsp;%</td>
		<td class="bg_weiss">3,5&nbsp;%</td>
		<td class="bg_weiss">10,4&nbsp;%</td>
	</tr>
</table>
```


----------

