title: Table Column Width Matching
body: <p><strong>UPDATE: Solution found</strong></p>
  
  <p><strong>UPDATE: No proposed answers. No solution found on my end. Anybody?</strong></p>
  
  <p>I am using javascript to match the width of columns in two seperate tables (using this to create a scrollable, sticky header table. If the data is all visible (no overflow), the method works fine. If the tables do overflow, however, the table columns do not align. I have a debugging stream that shows the offsetWidths are still returning the same numbers. Any ideas on why this is happening?</p>
  
  <p>Main HTML:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="CSS/APTEIT.css"/&gt;
  &lt;script type="text/javascript" src="Utilities/Javascript/Utilities.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="Utilities/Javascript/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      HtmlLoggerControlInstance.getInstance().setLevel("debug",HtmlLogger.ALL);
      syncColumnWidths("headers",null,"data",null);
  });
  &lt;/script&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;APTEIT&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!--#include file="Utilities/Debug.aspx"--&gt;
          &lt;img src="Images/logo.png" /&gt;
          &lt;div id="headersDiv"&gt;
              &lt;table class="tbl" id="headers"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;head1&lt;/td&gt;
                      &lt;td&gt;head2reallyreallylong&lt;/td&gt;
                      &lt;td&gt;hd3&lt;/td&gt;
                      &lt;td&gt;4&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div id="dataDiv" onscroll="syncScrolling('dataDiv','headersDiv');"&gt;
              &lt;table class="tbl" id="data"&gt;
              &lt;tr&gt;
                  &lt;td&gt;alsdja;lksdjaljkdf&lt;/td&gt;
                  &lt;td&gt;kdki&lt;/td&gt;
                  &lt;td&gt;k39&lt;/td&gt;
                  &lt;td&gt;lsjdl&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;alsdja;lksdjaljkdf&lt;/td&gt;
                  &lt;td&gt;kdki&lt;/td&gt;
                  &lt;td&gt;k39&lt;/td&gt;
                  &lt;td&gt;lsjdl&lt;/td&gt;
              &lt;/tr&gt;&lt;tr&gt;
                  &lt;td&gt;alsdja;lksdjaljkdasdfaf&lt;/td&gt;
                  &lt;td&gt;kdki&lt;/td&gt;
                  &lt;td&gt;k39&lt;/td&gt;
                  &lt;td&gt;lsjdl&lt;/td&gt;
              &lt;/tr&gt;&lt;tr&gt;
                  &lt;td&gt;alsdja;lksdjaljkdf&lt;/td&gt;
                  &lt;td&gt;kdki&lt;/td&gt;
                  &lt;td&gt;k39&lt;/td&gt;
                  &lt;td&gt;lsjdl&lt;/td&gt;
              &lt;/tr&gt;&lt;tr&gt;
                  &lt;td&gt;alsdja;lksdjaljkdfs&lt;/td&gt;
                  &lt;td&gt;kdki&lt;/td&gt;
                  &lt;td&gt;k39&lt;/td&gt;
                  &lt;td&gt;lsjdl&lt;/td&gt;
              &lt;/tr&gt;&lt;tr&gt;
                  &lt;td&gt;alsdf&lt;/td&gt;
                  &lt;td&gt;kdki&lt;/td&gt;
                  &lt;td&gt;k39&lt;/td&gt;
                  &lt;td&gt;lsjdl&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript Method:</p>
  
  <pre><code>/*
  Syncs column sizes between two tables. 
  
  @param string table1 : First table to sync
  @param int table1HeadRow : Row to use as column width sync for table1 (if null, uses first row)
  @param string table2 : Second table to sync
  @param int table2HeadRow : Row to use as column width sync for table2 (if null, uses first row)
  */
  function syncColumnWidths(table1, table1HeadRow ,table2, table2HeadRow){
      UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths-")
      if((typeof table1 == "string" ||table1.constructor == String) &amp;&amp; (typeof table2 == "string" ||table2.constructor == String)
          &amp;&amp; (typeof table1HeadRow == "number" || table1HeadRow == null) &amp;&amp; (typeof table2HeadRow == "number" || table1HeadRow == null)){
          tableOne = document.getElementById(table1);
          tableTwo = document.getElementById(table2);
  
          //Set row to check and get row
          if(table1HeadRow == null){
              t1Start = 0;
          }
          else{
              t1Start = table1HeadRow;
          }
          if(table2HeadRow == null){
              t2Start = 0;
          }
          else{
              t2Start = table2HeadRow;
          }
          t1Row = tableOne.rows[t1Start];
          t2Row = tableTwo.rows[t2Start];
  
          //Get end number
          if(t1Row.cells.length &lt; t2Row.cells.length){
              tEnd = t1Row.cells.length;
          }
          else{
              tEnd = t2Row.cells.length;
          }
  
          //Sync widths
          for(i = 0; i &lt; tEnd; i++){
              UtilLogger.log(HtmlLogger.CONFIG,"syncColumnWidths:t1 width:"+t1Row.cells[i].offsetWidth+"   t2 width:"+t2Row.cells[i].offsetWidth);
              if(t1Row.cells[i].offsetWidth &gt; t2Row.cells[i].offsetWidth){
                  t2Row.cells[i].style.width = t1Row.cells[i].offsetWidth+"px";
                  t1Row.cells[i].style.width = t1Row.cells[i].offsetWidth+"px";
                  UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t2 width to t1");
              }
              else{
                  t1Row.cells[i].style.width = t2Row.cells[i].offsetWidth+"px";
                  t2Row.cells[i].style.width = t2Row.cells[i].offsetWidth+"px";
                  UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t1 width to t2");
              }
          }
  
      }
      else{
          alert("syncColumnWidths takes parameters (string, int|null, string, int|null)");
      }
      UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths Complete-");
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.tbl{
  border-collapse:collapse;
  }
  .tbl tr td{
  border-width:1px;
  border-color:black;
  border-style:solid;
  }
  
  #headersDiv{
  max-width:100px;
  overflow:hidden;
  }
  
  #dataDiv{
  max-width:100px;
  overflow:auto;
  }
  </code></pre>
  
  <p>Debug prints:</p>
  
  <pre><code>-Syncing Column Widths Complete-
  syncColumnwidths:t1 style width:28px t2 style width:28px
  syncColumnWidths:setting t1 width to t2
  syncColumnWidths:t1 width:12 t2 width:28
  syncColumnwidths:t1 style width:27px t2 style width:27px
  syncColumnWidths:setting t1 width to t2
  syncColumnWidths:t1 width:26 t2 width:27
  syncColumnwidths:t1 style width:129px t2 style width:129px
  syncColumnWidths:setting t2 width to t1
  syncColumnWidths:t1 width:129 t2 width:30
  syncColumnwidths:t1 style width:137px t2 style width:137px
  syncColumnWidths:setting t1 width to t2
  syncColumnWidths:t1 width:40 t2 width:137
  -Syncing Column Widths-
  -Default Page Loaded-
  -Default Page Loading-
  </code></pre>