Tabellenzellen Breite festlegen von Harlequin, 28.11.2007 18:13

Tabellenzellen Breite festlegen

Harlequin 28.11.2007 18:13

javascript

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

Beitrag lesen

Tabellenzellen Breite festlegen

Tabellenzellen Breite festlegen