title: Trouble with Javascript table colspan
body: <p>I'm trying to make some of my columns span for readability, as well as pattern recognition. I'm also changing the background color of the cells to show patterns. If the data in my array is null, I use red. If it is not null and spans at least 2 columns, it is blue, otherwise, it is grey. I'm finding that some of my columns are wider than they should be, and some are shorter. With my data, the first columns are the only ones too wide, and the last are the only ones too short. So far as I can tell however, their colors are correct. I can give example code, but not example data as it is highly confidential. I can give the code, and will. Why are some of my columns wider, and others shorter than I expect them to be?</p>
  
  <pre><code>function loadTable() {
      var fields = JSON.parse(localStorage.getItem("boxFields"));
      var report = JSON.parse(localStorage.getItem("boxReport"));
      var space = document.getElementById("batchReport");
      var baseList = document.createElement("ul");
      space.appendChild(baseList);
      for (var i = 0; i &lt; fields.length; i++) {
          var li = document.createElement("li");
          baseList.appendChild(li);
          var header = document.createElement("h2");
          header.textContent = fields[i] + ":";
          li.appendChild(header);
          if (report.length &gt; 0) {
              var table = document.createElement("table");
              table.className += "wide";
              li.appendChild(table);
              var tr = document.createElement("tr");
              table.appendChild(tr);
              var td = document.createElement("td");
              td.colSpan = report.length;
              tr.appendChild(td);
              tr = document.createElement("tr");
              table.appendChild(tr);
              var compare = "NeverEqual";
              var count = 0;
              td = null;
              for (var j = 0; j &lt; report.length; j++) {
                  if (compare == report[j][i]) {
                      count++;
                      td.colSpan = count;
                      if (compare != null)
                          td.style.backgroundColor = "#336";
                  } else {
                      count = 1;
                      compare = report[j][i];
                      td = document.createElement("td");
                      tr.appendChild(td);
                      td.textContent = report[j][i];
                      //td.colSpan = 1;
                      if (compare != null)
                          td.style.backgroundColor = "#333";
                      else {
                          td.style.backgroundColor = "#633";
                      }
                  }
              }
          }
      }
      space.style.height = "93%";
      space.style.overflow = "auto";
  }
  </code></pre>