Beiträge von u2d

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>

<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> 
</body>
</html>

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

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

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

u2d

.....

und was wäre das pendant bei FF ?

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

u2d

leider bin ich nicht gerader der StyleSheet Held..

Könntest du etwas konkreter werden?

Welche sind denn IE spezifisch?

Gruß
Michael

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>