Tabellenzellen Breite festlegen von Harlequin, 27.11.2007 18:07

Tabellenzellen Breite festlegen

Harlequin 27.11.2007 17:10

javascript

Yerf!

Ich verzweifel hier gerade...
Ich versuche mittels Javascript eine Tabellenzeile in eine weitere Tabelle zu kopieren und dabei die Spaltenbreiten zu übernehmen. Ziel des ganzen soll eine beim scrollen feststehende Überschrift werden.

Hier der Code:

  
  function advTable()  
  {  
     var cont = document.getElementById("container");  //Hauptcontainer  
     var scroll = document.getElementById("scroll");   //Scrollbereich  
     var main = document.getElementById("main");       //Die Tabelle  
     var hori = document.createElement("table");       //die Spaltenbeschriftung  
     var horiBody = document.createElement("tbody");  
     hori.id = "horizontal";  
     hori.appendChild(horiBody);                       //Body fuer IE  
     var mainHori = main.rows[0];                      //erste Zeile der Haupttabelle  
     var horiRow = mainHori.cloneNode(true);           //duplizieren  
     horiBody.appendChild(horiRow);  
     cont.appendChild(hori);                           //und in die Ueberschriftentabelle  
     hori.style.width = main.offsetWidth + "px";       //Tabellenbreite angleichen  
     for(var index = 0; index < mainHori.cells.length; index++)  
     {                                                 //Zellenbreite angleichen  
          horiRow.cells[index].style.width = mainHori.cells[index].offsetWidth + "px";  
     }  
  }

das Problem ist, dass die Tabellenzellen der neuen Zeile sich nicht nach den übergebenen Breiten richten (sie orientieren sich an ihrem Inhalt). Allerdings zeigt mir Firebug an, dass die width korrekt gesetzt wurde...

Wie bekomme ich die Tabellenzellen soweit, dass sie sich an meine Breitenangaben halten?

Gruß,

Harlequin

PS: IE6 und FF2 zeigen beide das gleiche Ergebnis

--

Beitrag melden

– Informationen zu den Bewertungsregeln

Tabellenzellen Breite festlegen
Gunnar Bittersmann Homepage des Autors 27.11.2007 17:52

javascript
– Informationen zu den Bewertungsregeln
Hello out there!

Ziel des ganzen soll eine beim scrollen feststehende Überschrift werden.

Hilft dir Gernots Artikel "Übergroße Tabellen in koordiniert scrollenden Frames"?

See ya up the road,
Gunnar

--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Tabellenzellen Breite festlegen
  
  Harlequin 27.11.2007 18:07
  
  javascript
  – Informationen zu den Bewertungsregeln
  Yerf!
  
  Hilft dir Gernots Artikel "Übergroße Tabellen in koordiniert scrollenden Frames"?
  
  Den Artikel kenn ich. Aber ich hab leider vergessen zu erwähnen, dass ich keine Frames verwenden kann/will. Das würde den Aufwand explodieren lassen, wenn ich die ASP.NET-Seite über mehrere Frames verteilen müsste (das ganze ist eine Eingabematrix über die per Javascript Zellen angeklickt werden können). Ein kleiner Aurtomatismus wie dieses Skript wäre ideal, da ich es einfach in die vorhandene Anwendung einhängen könnte.
  
  2 Punkte hab ich schon gefunden:
  
  a) offsetWidth stammt von Microsoft, deshalb bekomme ich hier die Breite inklusive Padding und Rahmen (ein -22 hilft hier erst mal...) Allerdings hab ich dann immernoch Abweichungen von den Styles zu den tatsächlichen Breiten, obwohl nun die Werte wirklich identisch sein sollten. (Das scheinen Rundungsfehler zu sein, wärend der Browser versucht die Zellen in die Tabelle einzupassen)
  
  b) folgendes Hilft im FF
```
  
  #horizontal td{  
   display:block;  
   float:left;  
   border-left:1px solid transparent;  
  }  
```
  Aber ist nicht wirklich schön und vor allem kapiert das der IE nicht...
  
  Gibt es noch eine Möglichkeit oder muss ich wirklich die Tabelle auf Divs umbauen (zumindest die Überschriften)?
  
  Gruß,
  
  Harlequin
  
  PS: beim Tippen ist mir grad table-layout:fixed wieder eingefallen, das bringt den IE schon näher ans Ergebnis, nur noch 1px Abweichung. Falls das immer gleich sein sollte liese sich dafür sicherlich auch ein Workaround finden. Aber vielleicht hat ja jemand noch eine elegantere Lösung als dieses Pixelgeschubse...
  
  --
  
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum

Tabellenzellen Breite festlegen

Harlequin 28.11.2007 18:13

javascript

– Informationen zu den Bewertungsregeln

Yerf!

Ok, ich bin schon einen großen Schritt weiter, aber die Browser rauben mir noch den letzte Nerv...

a) Im IE passt alles (also hab ich was falsch gemacht...)
Der Trick war table-layout:fixed, zusammen mit einem margin-left:1px (vermutlich wegen Rahmen)

b) im Firefox bricht die letzte Zelle der Überschrift um
Die Zellen sind mit float:left angeordent und vermutlich ist die umgebende Tabelle zu schmal für alle Elemente inklusive Rahmen. Allerdings kann ich sie nicht breiter machen, da dann das Eregbnis im IE nicht stimmt...

c) im Opera hab ich einen Pixel Verschiebung.
Vermutlich ähnlich wie beim IE, allerding in beide Richtungen und natürlich wirkt das * html-CSS nicht...

Wie bekomme ich das jetzt alles unter einen Hut?

Leider kann ich den Code nirgends hochladen, ich häng das ganze mal an das Posting an (wird etwas länger)...

Gruß,

Harlequin

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">  
<html>  
  <head>  
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">  
  <title></title>  
  <style type="text/css">  

~~~~~~css
  
  #scroll{ /* Scrollbereich fuer die Tabelle */  
   margin-left:36px; margin-top:40px;  
   height:200px; width:300px;  
   overflow:auto; position:relative;  
  }  
  #container{ /* Hauptcontainer */  
   height:240px; width:336px;  
   position:relative; overflow:hidden;  
  }  
  td{ /* Zellen Umrahmen, damit besser sichtbar */  
   border:1px solid black;  
   padding:10px;  
  }  
  table{ /* Tabellen positionieren, damit Anordnung stimmt */  
   border-collapse:collapse;  
    position:absolute; top:0px; left:0px;  
  }  
  #main{ /* Hauptabelle verschieben, damit 1. zeile und Spalte verschwindet */  
   margin-left:-36px; margin-top:-40px;  
  }  
  * html #horizontal, * html #vertical{ /* IE */  
   table-layout:fixed;  
   margin-left:1px;  
  }  
  #container>#horizontal td{ /* FF */  
   float:left;  
   border-left:1px solid transparent; /* border-collapse geht nicht bei display:block */  
  }  
  #container>#vertical td{ /* FF */  
   border-top:1px solid transparent; /* border-collapse geht nicht bei display:block */  
  }  
  #container>table, #container>table tr, #container>table tD, #container>table tbody{ /* FF */  
   display:block;  
  }  

~~~~~~html
  
  </style>  
  <script type="text/javascript">  

~~~~~~javascript
  
  function advTable()  
  {  
   var cont = document.getElementById("container");  //Hauptcontainer  
   var scrl = document.getElementById("scroll");     //Scrollbereich  
   var main = document.getElementById("main");       //Die Tabelle  
 var hori = document.createElement("table");       //die Spaltenbeschriftung  
 var horiBody = document.createElement("tbody");  
 hori.id = "horizontal";  
 hori.appendChild(horiBody);                       //Body fuer IE  
 var mainHori = main.rows[0];                      //erste Zeile der Haupttabelle  
 var horiRow = mainHori.cloneNode(true);           //duplizieren  
 horiBody.appendChild(horiRow);  
 cont.appendChild(hori);                          //und in die Ueberschriftentabelle  
 hori.style.width = (main.offsetWidth) + "px";     //Tabellenbreite angleichen  
 for(var index = 0; index < mainHori.cells.length; index++)  
 {                                                 //Zellenbreite angleichen  
  horiRow.cells[index].style.width = (mainHori.cells[index].offsetWidth - 22) + "px";  
  horiRow.cells[index].style.height = (mainHori.cells[index].offsetHeight - 22) + "px";  
 }  
 var verti = document.createElement("table");      //die Zeilenbeschriftung  
 var vertiBody = document.createElement("tbody");  
 verti.id = "vertical";  
 verti.appendChild(vertiBody);                     //Body fuer IE  
 for(var index = 0; index < main.rows.length; index++)  
 {                                                 //Zellen duplizieren und anpassen  
  var nr = document.createElement("tr");  
  var source = main.rows[index].cells[0];  
  var target = source.cloneNode(true);  
  target.style.width = (source.offsetWidth -22) + "px";  
  target.style.height = (source.offsetHeight -22) + "px";  
  nr.appendChild(target);  
  vertiBody.appendChild(nr);  
 }  
 cont.appendChild(verti);  
  
 scrl.onscroll = function(){                           //Mitscrollen der zusaetzlichen Tabellen  
  var hori = document.getElementById("horizontal"); //die Spaltenbeschriftung  
  var verti = document.getElementById("vertical");  //die Zeilenbeschriftung  
  hori.style.left = (-this.scrollLeft) + "px";  
  verti.style.top = (-this.scrollTop) + "px";  
  }  
  }  

~~~~~~html
  
  </script>  
  </head>  
  <body onload="advTable();">  
  <div id="container">  
  <div id="scroll">  
 <table id="main">  
  <tr>  
   <td>&nbsp;</td>  
   <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>  
   <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>  
  </tr>  
  <tr>  
   <td>1</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
  </tr>  
  <tr>  
   <td>2</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
  </tr>  
  <tr>  
   <td>3</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
  </tr>  
  <tr>  
   <td>4</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
  </tr>  
  <tr>  
   <td>5</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
  </tr>  
  <tr>  
   <td>6</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
  </tr>  
  <tr>  
   <td>7</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
  </tr>  
  <tr>  
   <td>8</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
  </tr>  
  <tr>  
   <td>9</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
  </tr>  
  <tr>  
   <td>10</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
   <td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xx</td><td>x</td>  
  </tr>  
 </table>  
 </div>  
</div>  
  </body>  
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Harlequin: Tabellenzellen Breite festlegen

Tabellenzellen Breite festlegen

Tabellenzellen Breite festlegen

Tabellenzellen Breite festlegen

Tabellenzellen Breite festlegen

Tabellenzellen Breite festlegen