Hallo ....
bräuchte mal bitte etwas hilfe bei einem dringenden Problem:
Ich will im IE eine Tabelle mit fixed table header (Wenn man den Tabellenkörper scrollt soll der Kopf stehen bleiben).
Soweit gar nicht so schwer:
Ich umgebe die Tabelle mit einem DIV und scrolle den DIV.
Mit einem Doctype switch bekommte ich den IE dazu den Tabellenkopf oben zu halten sobald man die TRs auf position: relative; setzt (<tr style=" position: relative;"> ).
Das Problem ist jetzt jedoch, dass sobald ich im Tablehead einen ROWSPAN="x" einsetzte, was für meine Tabelle unumgänglich ist, die Anzeige "zerschossen" wird. Die überspannte Zelle wird nur noch halb dargestellt.
Ich habe mein code mal auf das Minimum reduziert.
Also hier mein code (die site läuft zur Zeit leider nur local daher kann ich keinen Link posten
) :
schon mal vielen Dank für jedwede Hilfe !!!!
bräuchte mal bitte etwas hilfe bei einem dringenden Problem:
Ich will im IE eine Tabelle mit fixed table header (Wenn man den Tabellenkörper scrollt soll der Kopf stehen bleiben).
Soweit gar nicht so schwer:
Ich umgebe die Tabelle mit einem DIV und scrolle den DIV.
Mit einem Doctype switch bekommte ich den IE dazu den Tabellenkopf oben zu halten sobald man die TRs auf position: relative; setzt (<tr style=" position: relative;"> ).
Das Problem ist jetzt jedoch, dass sobald ich im Tablehead einen ROWSPAN="x" einsetzte, was für meine Tabelle unumgänglich ist, die Anzeige "zerschossen" wird. Die überspannte Zelle wird nur noch halb dargestellt.
Ich habe mein code mal auf das Minimum reduziert.
Also hier mein code (die site läuft zur Zeit leider nur local daher kann ich keinen Link posten
) :
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Table with Fixedheader</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="language" content="en-us" />
<style type="text/css" media="screen">
<!--
/* define height and width of scrollable area. Add 16px to width for scrollbar */
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 250px;
overflow: auto;
}
/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative;
background: white;
}
-->
</style>
</head>
<body>
<h1>Table with Fixedheader Test Version</h1>
<h2>Using CSS to allow scrolling within a single HTML table</h2>
<div><br/></div>
<div id="table1" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" name="tableName" class="scrollTable">
<thead class="fixedHeader" id="HeadeID1">
<tr>
<th rowspan="2"><div>Header 1 Span=2</div></th>
<th><div>Header 2</div></th>
<th><div>Header 3</div></th>
</tr>
<tr>
<th ><div>Header 2</div></th>
<th ><div>Header 3</div></th>
</tr>
</thead>
<tfoot class="Foot" name="footerName">
<tr>
<th><a href="#">Foot 1</a></th>
<th><a href="#">Foot 2</a></th>
<th><a href="#">Foot 3</a></th>
</tr>
<tr>
<th><a href="#">Row 2: Foot 1</a></th>
<th><a href="#">Foot 2</a></th>
<th><a href="#">Foot 3</a></th>
</tr>
</tfoot>
<tbody class="scrollContent">
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla vitae wisi. Nulla euismod aliquet tellus.</td>
<td>In sit amet enim. Praesent vulputate tortor nec ante. Morbi sollicitudin est non neque.</td>
<td>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td style="background-color: gray;">Cell Content 2</td>
<td><select name="sampleSelect1" id="sampleSelect1"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option></select></td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td><select name="sampleSelect2" id="sampleSelect2" size="5" multiple="multiple"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option></select></td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td><input type="password" name="samplePassword" id="samplePassword" value="password" /></td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td><input type="submit" name="sampleSubmit" id="sampleSubmit" value="Sample Submit Button" /></td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td><input type="reset" name="sampleReset" id="sampleReset" value="Sample Reset Button" /></td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td><input type="button" name="sampleButton" id="sampleButton" value="Sample Button Element" /></td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td><select name="sampleSelect5" id="sampleSelect5"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option></select></td>
</tr>
</tbody>
</table>
</div>
</body></html>schon mal vielen Dank für jedwede Hilfe !!!!