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

Question

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

但我发现它没有使用文档中描述的 table 元素。相反，它使用 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

我在这里创建了一个 jsfiddle，在 ContentPane 中使用 TableContainer 布局。

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

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

dojox.layout.TableContainer using div instead of table element

dojo