Helge Busch: Tabellenspalte-Breite-auslesen

Hallo Leute,

wie kann ich die Spaltenbreite einer Tabellensplate mittels JavaScript ermitteln?

Das Problem ist, die Tabelle wird mit dynamsichen Inhalten gefüllt und aus diesem Grunde setzte ich das width-Property in dem td-Tag nicht. Jede Spalte soll sich soviel Platz nehmen, wie sie braucht. Aber danach möchte ich wissen, wie breit sie tatsächlich geworden ist.

Über jede Hilfe, wäre ich glücklich.

MfG
Helge Busch

Hier kurz ein Sourcefragment, welches die Problematik darstellt.

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
 <title>Untitled</title>
 <script language="JavaScript" type="text/javascript">
<!--
 document.write("You are using " + navigator.appName + " " + navigator.appVersion);
// -->
</script>
<script>
<!--
  function getColumnWidth(){
  x = document.getElementById('td2');
  alert(x.width);
 }

//-->
</script>
</head>

<body onLoad="getColumnWidth();">
<table cellspacing="2" cellpadding="2" border="1"  >
<tr>
    <td id="td1" colspan="2"></td>
    <td id="td2">Das ist ein Test</td>
</tr>
<tr>
    <td id="td3">Ja hier soll was stehen</td>
    <td id="td4">Hier auch</td>
    <td id="td5">Mist Splatenbreite</td>
</tr>
<tr>
    <td id="td6">Ja immer schön dynamisch</td>
    <td id="td7" colspan="2">Auch hier</td>
</tr>
<tr>
    <td id="td8"> </td>
    <td id="td9"> </td>
    <td id="td10">Lalalal - lala</td>
</tr>
</table>

</body>
</html>

  1. Hallo,

    Das Problem ist, die Tabelle wird mit dynamsichen Inhalten gefüllt und aus diesem Grunde setzte ich das width-Property in dem td-Tag nicht. Jede Spalte soll sich soviel Platz nehmen, wie sie braucht. Aber danach möchte ich wissen, wie breit sie tatsächlich geworden ist.

    Sofern der Browser die DOM-Methode getComputedStyle() kennt, ist das -- bezogen auf Dein Beispiel -- so loesbar:

    function getColumnWidth()
    {
      var x,breite;
      if(document.defaultView)
      {
        x=document.getElementById("td2");
        breite=document.defaultView.getComputedStyle(x,"").getPropertyValue("width");
        alert(breite);
      }
    }

    Mozilla zeigt mir z. B. 110px.

    MfG, Thomas

    --
    SVG - Learning By Coding
    http://svglbc.datenverdrahten.de/
    1. Sofern der Browser die DOM-Methode getComputedStyle() kennt, ist das -- bezogen auf Dein Beispiel -- so loesbar:

      DAS wusste ich allerding nicht!

    2. Hi,

      danke, für die Hilfe.
      Leider läuft das unter IE nicht.
      Habe es mit element.currentStyle.width versucht aber das hilft auch nicht wirklic.

      Vielleicht fällt jemandem ja noch was ein.

      Danke u. Gruß,
      Helge

      1. danke, für die Hilfe.
        Leider läuft das unter IE nicht.
        Habe es mit element.currentStyle.width versucht aber das hilft auch nicht wirklic.

        Vielleicht fällt jemandem ja noch was ein.

        Dann würde ich es mal für den MSIE mit offsetWidth probieren, bei divs funktioniert das, hoffen wir bei Tabellen(zellen) auch.
        Ist natürlich bei Weitem kein Ersatz für getComputedStyle, da hiermit nur die vier Werte für (offset)Width, -Height, Left und -Top zu bekommen sind, im Mozilla kann man dagegen sämtlichen berechneten Stylewerte abfragen.

        Gruß
        C2H5OH

  2. Das Problem ist, die Tabelle wird mit dynamsichen Inhalten gefüllt und aus diesem Grunde setzte ich das width-Property in dem td-Tag nicht. Jede Spalte soll sich soviel Platz nehmen, wie sie braucht. Aber danach möchte ich wissen, wie breit sie tatsächlich geworden ist.

    Du kannst nur angaben auslesen. Die automatischen Werte stehen nirgends geschrieben. Das dürfte nicht möglich sein.