Tabelle mit fixer Überschrift

u2d

Hallo Forum...

Ich hab ein kleines Problem..
Ich möchte die Überschift einer Tabelle fixieren, damit die Überschrift beim scollen in der Tabelle immer stehen bleibt...

Für den IE konnte ich es schon über ein Style Sheet lösen...
Aber für den FF hab ich es nicht gefunden..

Könnt ihr helfen?

Vielen Dank und Gruß

Michael

HaMF

Beispielseite? und wie hast du das dem IE beigebracht ôO?

Gruß Hannes

u2d

Hallo!

Hier die CSS Datei und die HTML Seite..

Hier der CSS Code Datei "locked-columns.css":
------------------------
/* defines then width and height of the table */
div#tbl-container {
width: 418px;
height: 252px;
overflow: auto;
}

table {
table-layout: fixed;
border-collapse: collapse;
background-color: WhiteSmoke;
}

div#tbl-container table th {
width: 100px;
}

/*behavior of table head - normal and locked*/
thead th, thead th.locked {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: #4C719E;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
}

/* really don't know for what */
thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2); /* IE5+ only */
z-index: 20;
}

/* sets the element to front 30 > 10*/
thead th.locked {z-index: 30;}

/*locks header column and the columns in table*/
td.locked, th.locked{
background-color: #ffeaff;
font-weight: bold;
border-right: 1px solid silver;
left: expression(document.getElementById("tbl-container").scrollLeft); /* IE5+ only */
position: relative;
z-index: 10;
}
------------------------

Und jetzt der html Code dazu:
----------------
<html>
<head>
<title>Lock Columns, Column Locking, Freeze Columns in HTML Tables</title>
<link rel="stylesheet" href="locked-column.css" type="text/css">

var table = document.getElementById(tblID);
var button = document.getElementById('toggle');
var cTR = table.getElementsByTagName('TR'); //collection of rows

if (table.rows[0].cells[0].className == '') {
for (i = 0; i < cTR.length; i++)
{
var tr = cTR.item(i);
tr.cells[0].className = 'locked'
tr.cells[2].className = 'locked'
}
button.innerText = "Unlock Columns";
}
else {
for (i = 0; i < cTR.length; i++)
{
var tr = cTR.item(i);
tr.cells[0].className = ''
tr.cells[2].className = ''
}
button.innerText = "Lock First Column";
}
}
function lockHead(tblID) {

var table = document.getElementById(tblID);
var button = document.getElementById('toggleH');
var cTR = table.getElementsByTagName('TR'); //collection of rows

thead.className= ''

}

</script>

</head>
<body>

<button onClick="lockCol('tbl')" id="toggle">Lock Columns</button>
<button onClick="lockHead('tbl')" id="toggleH">Lock Head</button>
<div id="tbl-container">

<table id="tbl">
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English hlvlhb lhb hbl </th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
</tr>
</thead>

<tbody>

<tr>
<td>Student01</td>
<td>Languages</td>
<td>male</td>
<td>80</td>
<td>70</td>
<td>75</td>
<td>80</td>

</tr>
<tr>
<td>Student02</td>
<td>Mathematics</td>
<td>male</td>
<td>90</td>
<td>88</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student03</td>
<td>Languages</td>
<td>female</td>
<td>85</td>
<td>95</td>
<td>80</td>
<td>85</td>

</tr>
<tr>
<td>Student04</td>
<td>Languages</td>
<td>male</td>
<td>60</td>
<td>55</td>
<td>100</td>
<td>100</td>

</tr>
<tr>
<td>Student05</td>
<td>Languages</td>
<td>female</td>
<td>68</td>
<td>80</td>
<td>95</td>
<td>80</td>

</tr>
<tr>
<td>Student06</td>
<td>Mathematics</td>
<td>male</td>
<td>100</td>
<td>99</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student07</td>
<td>Mathematics</td>
<td>male</td>
<td>85</td>
<td>68</td>
<td>90</td>
<td>90</td>

</tr>
<tr>
<td>Student08</td>
<td>Languages</td>
<td>male</td>
<td>100</td>
<td>90</td>
<td>90</td>
<td>85</td>

</tr>
<tr>
<td>Student09</td>
<td>Mathematics</td>
<td>male</td>
<td>80</td>
<td>50</td>
<td>65</td>
<td>75</td>

</tr>
<tr>
<td>Student10</td>
<td>Languages</td>
<td>male</td>
<td>85</td>
<td>100</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student11</td>
<td>Languages</td>
<td>male</td>
<td>86</td>
<td>85</td>
<td>100</td>
<td>100</td>

</tr>
<tr>
<td>Student12</td>
<td>Mathematics</td>
<td>female</td>
<td>100</td>
<td>75</td>
<td>70</td>
<td>85</td>

</tr>
<tr>
<td>Student13</td>
<td>Languages</td>
<td>female</td>
<td>100</td>
<td>80</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student14</td>
<td>Languages</td>
<td>female</td>
<td>50</td>
<td>45</td>
<td>55</td>
<td>90</td>

</tr>
<tr>
<td>Student15</td>
<td>Languages</td>
<td>male</td>
<td>95</td>
<td>35</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student16</td>
<td>Languages</td>
<td>female</td>
<td>100</td>
<td>50</td>
<td>30</td>
<td>70</td>

</tr>
<tr>
<td>Student17</td>
<td>Languages</td>
<td>female</td>
<td>80</td>
<td>100</td>
<td>55</td>
<td>65</td>

</tr>
<tr>
<td>Student18</td>
<td>Mathematics</td>
<td>male</td>
<td>30</td>
<td>49</td>
<td>55</td>
<td>75</td>

</tr>
<tr>
<td>Student19</td>
<td>Languages</td>
<td>male</td>
<td>68</td>
<td>90</td>
<td>88</td>
<td>70</td>

</tr>
<tr>
<td>Student20</td>
<td>Mathematics</td>
<td>male</td>
<td>40</td>
<td>45</td>
<td>40</td>
<td>80</td>

</tr>
<tr>
<td>Student21</td>
<td>Languages</td>
<td>male</td>
<td>50</td>
<td>45</td>
<td>100</td>
<td>100</td>

</tr>
<tr>
<td>Student22</td>
<td>Mathematics</td>
<td>male</td>
<td>100</td>
<td>99</td>
<td>100</td>
<td>90</td>

</tr>
<tr>
<td>Student23</td>
<td>Languages</td>
<td>female</td>
<td>85</td>
<td>80</td>
<td>80</td>
<td>80</td>

</tr>
</tbody>
</table>

</div> 
<input req="N" style="position: absolute; left: 295px; top: 2px; width: 120px; height: 20px; font-family: Arial; font-size: 10px; font-style: normal; font-weight: normal;" title="" type='text' name='NDW_JTextField_1' id='NDW_JTextField_1' value="" DISABLED maxlength='10000' onSelectStart="event.cancelBubble = true;" onKeyDown="autoSearch(this, '');">
</body>
</html>

----------------

Gruß
Michael

JonHa

Du verwendest teilweise irgendwelche IE-Eigenschaften Im Style-Sheet. Da ist es kein Wunder, dass der Firefox damit nicht viel anfangen kann.

u2d

leider bin ich nicht gerader der StyleSheet Held..

Könntest du etwas konkreter werden?

Welche sind denn IE spezifisch?

Gruß
Michael

Dr. Evil

die, bei denen "IE5+ only" dran steht

u2d

.....

und was wäre das pendant bei FF ?

und damit miene ich nicht (FF only) :lol:

JonHa

Beim Fx kannst du da so ne 'expression' nicht benutzen. Da muss man mit realen Werten arbeiten, z.B. left: 100px; oder left: 10%; oder so. Musst du mal gucken, wie du das bei dir hinkriegst.

u2d

also...
top: expression(document.getElementById("tbl-container").scrollTop-2); /* IE5+ only */

liefert anscheindend die position der Tabelle beim scrollen...
z.B.: Erste Tabellenzeile top = 0-2 = -2
scrollen ich nun runter, dann würde etwa so etwas rauskommen:
top = 120-2=118

expression(document.getElementById("tbl-container").scrollTop ist die aktuelle position der Tabelle beim scrollen, oder?

Gibts sowas nicht in FF?

Gruß
Michael

JonHa

Sowas gibt's nicht im Firefox.

Aber nimm doch stattdessen (oder von mir aus zusätzlich) position:fixed. Das ist wenigstens offizieller Webstandard, und wird auch vom Firefox unterstützt. IE wird das aber erst ab Version 7 unterstützen.

http://de.selfhtml.org/css/eigenschaf…ng.htm#position

u2d

sorry....aber das funzt leider nicht....

Mal abgesehen von der CSS, die ich hier gepostet habe...

Wie kann ich bei FF die Kopfzeile einer Tabelle fixieren?
Hat das schon jemand gemacht?

Gruß
Michael

Dr. Evil

mit position:fixed geht das ohne Probleme. (man muss natürlich auch die Position angeben)

u2d

Hmmmm...

sorry...aber wenn ich das benutze, dann gehts zwar in FF(aber auch nicht wirklich...Spaltenbreite des thead ist unterschiedlich zu den td's)

Und in IE gehts dann garnicht...

danke für eure hilfe....

Grüsse
Michael
-----------------------------
<html>
<head>
<title>Lock Columns, Column Locking, Freeze Columns in HTML Tables</title>
<style type="text/css">
<!--
div#tbl-container {
width: 418px;
height: 252px;
overflow: auto;
}

thead {
position:fixed;
top:0px;
z-index:30;
}
-->
</style>

</head>
<body>

<table id="tbl">
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
</tr>
</thead>