如何对齐同一行中的表中的所有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

回答

相关问题