表内表不工作的内部表

Question

我想在表内制作一张表，这样我就可以在正确的位置组织东西。但我简单不能设置表格宽度。下面是表

的图片，在红色圆圈中，我已经创建表内的表，它有一排3列：

，这里是我用来创建第二个表的代码：

// attack type 
    var farmTableAttack = dom.cn("table"); 

    var ftableBodyAttack = dom.cn("tbody"); 

    farmTableAttack.style.tableLayout = "fixed"; 

    farmTableAttack.width = "20px"; 

    ftableBodyAttack.setAttribute("colspan", 4); 

    ftableBodyAttack.setAttribute("width", 50); 

    tableRow = dom.cn("tr"); 

    tableCol = dom.cn("th"); 

    tableCol.setAttribute("colspan", 2); 

    tableCol.innerHTML = "Attack: "; 

    tableRow.appendChild(tableCol); 

    tableCol = dom.cn("th"); 

    tableCol.setAttribute("colspan", 1); 

    tableCol.innerHTML = "N"; 

    var Button = createInputButton("checkbox"); 

    Button.id = "attackTypeN"; 

     Button.checked = GM_getValue("checkBoxAttackType_"+suffixLocal, "tabela") == "normal"; 

     Button.addEventListener("click", function() { 

      if (Button.checked) { 
       Button.checked = false; 
       GM_setValue("checkBoxAttackType_"+suffixLocal, "tabela"); 
      } 
      else if (document.getElementbyId("attackTypeA").checked == true) { 
       document.getElementbyId("attackTypeA").checked = false; 
       GM_setValue("checkBoxAttackType_"+suffixLocal, "normal"); 
      } 

       }, false); 

    tableCol.appendChild(Button); 

    tableRow.appendChild(tableCol); 


    tableCol = dom.cn("th"); 

    tableCol.setAttribute("colspan", 1); 

    tableCol.innerHTML = "A"; 

    var Button = createInputButton("checkbox"); 


     Button.id = "attackTypeA"; 

     Button.checked = GM_getValue("checkBoxAttackType_"+suffixLocal, "tabela") == "assalto"; 

     Button.addEventListener("click", function() { 

      if (Button.checked) { 
       Button.checked = false; 
       GM_setValue("checkBoxAttackType_"+suffixLocal, "tabela"); 
      } 
      else if (document.getElementbyId("attackTypeN").checked == true) { 
       document.getElementbyId("attackTypeN").checked = false; 
       GM_setValue("checkBoxAttackType_"+suffixLocal, "assalto"); 
      } 

       }, false); 

    tableCol.appendChild(Button); 

    //append the row in the table 
    tableRow.appendChild(tableCol); 

    ftableBodyAttack.appendChild(tableRow); 

    farmTableAttack.appendChild(ftableBodyAttack); 

我想要第二张桌子放在这个地方（这个是原来的表没有第二个表编码到它）：

我简单的不知道该怎么办。

另一个选择是修复原始表格的圆形区域内的东西，而不必使用另一个表格，我只是不知道该怎么做。

dom.cn：

var dom = new DOMUtils(); 

//DOM functions 

function DOMUtils(doc, ctxt, html) { // from FranMod 

    this.cn = function(tag, html) { 

     var elem = this.document.createElement(tag); 

     if (html) 

      elem.innerHTML = html; 

     return elem; 

    } 



    this.ct = function(text) { 

     return this.document.createTextNode(text); 

    } 



    this.id = function(id) { 

     return this.document.getElementById(id); 

    } 



    this.tag = function(tag) { 

     return this.document.getElementsByTagName(tag); 

    } 



    this.xs = function(xpath) { 

     var res = this.document.evaluate(xpath, this.context, null, 

       XPathResult.FIRST_ORDERED_NODE_TYPE, null); 

     return res.singleNodeValue; 

    } 



    this.xa = function(xpath) { 

     var arr = []; 

     var xpr = this.document.evaluate(xpath, this.context, null, 

       XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); 

     for (var i = 0; item = xpr.snapshotItem(i); i++) 

      arr.push(item); 

     return arr.length == 0 ? null : arr; 

    } 



    this.xo = function(xpath) { 

     var ret = this.document.evaluate(xpath, this.context, null, 

       XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); 

     return ret; //no snapshot 

    } 

    this.find = function(xpath, xpres, doc) { 

     if (!doc) 

      doc = document; 

     else if (typeof doc == 'string') 

      doc = cn('div', doc); 

     var ret = document.evaluate(xpath, doc, null, xpres, null); 



     return xpres == XPFirst ? ret.singleNodeValue : ret; 

    } 

    this.get = function(id, doc) { 

     if (!doc) 

      doc = document; 

     return doc.getElementById(id); 

    } 

    if (!doc) 

     doc = document; 

    if (!ctxt) 

     ctxt = doc; 

    if (html) { 

     this.document = doc.implementation.createDocument('', '', null); 

     this.context = doc.createElement('div'); 

     this.context.innerHTML = html; 

     ansDoc.appendChild(this.context); 

    } else { 

     this.document = doc; 

     this.context = ctxt; 

    } 

} 

Answer 1

以及如果所有的失败采取三个项目。把单元格显示块。 把每个项目放入一个div与CSS浮动：左;为我工作...

Answer 2

如果子表将永远只能是一个行，考虑不使用一个子表，而是在该行中增加额外的细胞。对于其他行，请使用colspan跨越所有这些前子表的单元格：

<table> 
    <tr><td colspan='3'>Cell 1</td>        <td>0</td></tr> 
    <tr><td colspan='3'>Cell 2</td>        <td>0</td></tr> 

    <tr><td>'subcell'a</td><td>'subcell'b</td><td>'subcell'c</td> <td>0</td></tr> 
</table> 

Answer 3

以下helle建议我用css float左和它解决了这个问题。这里是最终代码：

Button = dom.cn("div"); 

Button.setAttribute("style", "width:10px;float:left;"); 

Button.innerHTML = " "; 

tableCol.appendChild(Button); 


Button = dom.cn("div"); 

Button.setAttribute("style", "float:left;"); 

Button.innerHTML = "Attack type: "; 

tableCol.appendChild(Button); 

var Button = createInputButton("checkbox"); 

Button.id = "attackTypeN"; 

    Button.checked = GM_getValue("checkBoxAttackType_"+suffixLocal, "tabela") == "normal"; 

    Button.addEventListener("click", function() { 

     if (Button.checked) { 
      Button.checked = false; 
      GM_setValue("checkBoxAttackType_"+suffixLocal, "tabela"); 
     } 
     else if (document.getElementbyId("attackTypeA").checked == true) { 
      document.getElementbyId("attackTypeA").checked = false; 
      GM_setValue("checkBoxAttackType_"+suffixLocal, "normal"); 
     } 

      }, false); 

Button.setAttribute("style", "float:left;"); 

tableCol.appendChild(Button); 

Button = dom.cn("div"); 

Button.setAttribute("style", "float:left;"); 

Button.innerHTML = "N"; 

tableCol.appendChild(Button); 

var Button = createInputButton("checkbox"); 


    Button.id = "attackTypeA"; 

    Button.checked = GM_getValue("checkBoxAttackType_"+suffixLocal, "tabela") == "assalto"; 

    Button.addEventListener("click", function() { 

     if (Button.checked) { 
      Button.checked = false; 
      GM_setValue("checkBoxAttackType_"+suffixLocal, "tabela"); 
     } 
     else if (document.getElementbyId("attackTypeN").checked == true) { 
      document.getElementbyId("attackTypeN").checked = false; 
      GM_setValue("checkBoxAttackType_"+suffixLocal, "assalto"); 
     } 

      }, false); 

Button.setAttribute("style", "float:left;"); 

tableCol.appendChild(Button); 

Button = dom.cn("div"); 

Button.setAttribute("style", "float:left;"); 

Button.innerHTML = "A"; 

tableCol.appendChild(Button); 

//append the row in the table 
tableRow.appendChild(tableCol);