dojox.layout.TableContainer使用div而不是table元素

Question

我正在按照here所述的编程方式创建一个表容器。

但我发现它没有使用文档中描述的表元素。相反，它使用div。因此，如果调整父级的大小，子进程就会流动。标签也没有出现。这就是它最终的样子。

这是我的代码。代码中的detailPane是dijit / layout / ContentPane，它的父级是dijit / layout / BorderContainer。我做错了什么？

    var programmatic = new TableContainer(
            {
              cols: 2,
              showLabels: true
            });
    detailPane.addChild(programmatic);
    var text1 = new TextBox({label: "ProgText 1"});
    var text2 = new TextBox({label: "ProgText 2"});
    var text3 = new TextBox({label: "ProgText 3"});
    var text4 = new TextBox({label: "ProgText 4"});

    // Add the four text boxes to the TableContainer
    programmatic.addChild(text1);
    programmatic.addChild(text2);
    programmatic.addChild(text3);
    programmatic.addChild(text4);
    programmatic.startup();

谢谢，

Answer 1

我在ContentPane中使用TableContainer布局创建了jsfiddle。

JS部分：

require(["dojo/parser","dijit/layout/ContentPane","dojox/layout/TableContainer", "dijit/form/TextBox","dojo/domReady!"], function (parser, ContentPane, TableContainer, TextBox ) {

var myCP = new ContentPane({
        style:"height:125px"
    }, "putWidgetHere");    

// Add the custom class "labelsAndValues"
var programmatic = new TableContainer(
{
  cols: 2,
  customClass:"labelsAndValues",
  "labelWidth": "150"
} /*,"putWidgetHere" */);

// Create four text boxes
var text1 = new TextBox({label: "ProgText 1"});
var text2 = new TextBox({label: "ProgText 2"});
var text3 = new TextBox({label: "ProgText 3"});
var text4 = new TextBox({label: "ProgText 4"});

// Add the four text boxes to the TableContainer
programmatic.addChild(text1);
programmatic.addChild(text2);
programmatic.addChild(text3);
programmatic.addChild(text4);

    myCP.addChild(programmatic);
    myCP.startup();

});

CSS部分：

.labelsAndValues-labelCell {

  background-color: lightgrey;
  padding-left: 5px;
}

.labelsAndValues-valueCell {

  padding-left: 20px;
  background-color: lightblue;
}