表內表不工作的內部表

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);