Javascript表colspan的问题

我试图使我的一些专栏跨越可读性，以及模式识别。我还改变了单元格的背景色以显示模式。如果数组中的数据为空，则使用红色。如果它不为null且至少跨越两列，则为蓝色，否则为灰色。我发现我的一些专栏比它们应该的要宽，而一些则更短。根据我的数据，第一列是唯一太宽的列，最后一列是唯一太短的列。但据我所知，它们的颜色是正确的。我可以给出示例代码，但不能给出示例数据，因为它是高度机密的。我可以给你密码，我会的。为什么我的一些专栏比我预期的要宽，而其他的要短

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 < 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 > 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 < 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";
}

函数加载表（）{
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（基本列表）；
对于（变量i=0；i0）{
var table=document.createElement（“表”）；
table.className+=“宽”；
li.儿童（表）；
var tr=document.createElement（“tr”）；
表1.儿童（tr）；
var td=document.createElement（“td”）；
td.colSpan=report.length；
tr.appendChild（td）；
tr=document.createElement（“tr”）；
表1.儿童（tr）；
var compare=“NeverEqual”；
var计数=0；
td=null；
对于（var j=0；j

您没有为表格单元格指定明确的宽度，因此它们将根据内容和浏览器/IE的回退逻辑自动计算。如果要使单元格具有特定宽度，请对其应用类或使用属性明确性设置它，例如：

td.style.width = "50px";

或

---

这里的问题是什么？你已经描述了你在做什么，但没有描述问题是什么。还有一个原因是您使用的表与ms网格布局相比被认为是非常不推荐的吗？编辑后有一个明确的问题。至于ms网格布局，使用javascript的一个重要原因是跨平台。WinRT/JS中的表应该很好，因为它声称与html5兼容。我甚至认为，为了这个目的，我只是算错了什么，但我忽略了它，要求额外的一双眼睛。谢谢你的想法。这是一个有趣的想法，但我认为它忽略了这样一个想法：如果有足够的空间，每一列都应该具有相同的权重，并且当一个单元格跨越多个列时，它“似乎”应该获得成比例的权重。正如您可能已经看到的，我的表格是用“宽”分类的，我用它来设置为100%。设置单元格宽度将无法正确保存此行为。我不打算把这个标记为正确答案，但我会投票表决。

td.className = "myCell";
// and in css somewhere define the class
.myCell{
  width: 50px;
}