如何對齊同一行中的表中的所有td

我正在使用kendo ui treeview。在這裏我動態地添加了treeview節點，並且我正在使用kendo ui模板。我已經定義模板是這樣的：如何對齊同一行中的表中的所有td

<script id="treetemplate" type="text/kendo-ui-template"> 


       <table id='treeviewtable'> 

     # if (item.categoryName == "Textbox") { # 
     <tr> 
     <td> 
      <label style="color:red">#=item.label#</label> 
     </td> 
     <td> 
     <label>#=item.val#</label> 
     </td> 
     # } # 

      # if (item.categoryName == "Dropdown") { #    

        <td> 
     <label style="color:red">#=item.label#</label> 
     </td> 
     <td> 
     <label>#=item.val#</label> 
     </td> 
     # } # 

    </table> 
    </script>

我已經定義了樹視圖這樣的：

 var treeview = $("#treeview").kendoTreeView({ 
        template: kendo.template($("#treetemplate").html()), 
        dataSource: homogeneous, 
        dataTextField: ["categoryName"], 

       }).data("kendoTreeView"); 

       kendo.init($("#treeview-left"));

我寫了一個Ajax和動態附加樹狀的孩子是這樣的：

它工作正常。我的問題是我想以表格格式添加控件，每個tr都包含兩個控件。就像我想顯示的文本框和下拉並排。我該怎麼做？

來源

2013-04-08 Pa1

第一條評論是template中HTML table的標籤沒有正確平衡......但這不會影響結果。

在KendoUI樹節點是HTML無序列表（ul），因此每個節點內容都在HTML列表項（li）內。知道這一點，你可能會明白，使用你的表，每個節點是不同的表，所以一個項目不知道前一個/下一個的寬度，他們不會保持相同的寬度。

所以，你需要樣式的列表元素爲float。定義以下樣式：

如果你知道每兩列的寬度可以定義兩個CSS樣式爲：

#treeview li.k-item { 
    float: left; 
}

現在，您的模板可能是這樣的：

<script id="treetemplate" type="text/kendo-ui-template"> 
    # if (item.categoryName == "Textbox") { # 
    <div><label class="ob-label" style="color:red">#=item.label#</label></div> 
    <div><label class="ob-val">#=item.val#</label></div> 
    # } # 

    # if (item.categoryName == "Dropdown") { # 
    <div><label class="ob-label" style="color:green">#=item.label#</label></div> 
    <div><label class="ob-val">#=item.val#</label></div> 
    # } # 
</script>

您可能會在此處看到一個運行示例：http://jsfiddle.net/OnaBai/t6UeG/1/

根據您想要獲得的內容，可以使用KendoUI Menus

來源

2013-04-08 15:35:51 OnaBai

很好的例子。但是我希望兩個數據源項目並排。我的意思是在這個例子中有兩行和一列。但我需要兩列和一排 – Pa1 2013-04-09 05:13:09

@ Pa1我已經更新了我的答案並排 – OnaBai 2013-04-09 06:54:40

如何對齊同一行中的表中的所有td

回答

相關問題