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:

HTML:

<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:

HTML:

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

Table scrolling mit fixed header und fixed 1. Spalte

ouzorider

Grünschnabel

Maik

ouzorider

Grünschnabel

Neue Beiträge