Dojo 1.9 How can I add a blank <td> to the dojox/layout/TableContainer?

Question

How can I add an empty <td> in dojo TableContainer?

I have this code:

var tableContainer = new TableContainer({
  id : "filteTableContainer",
  cols : 3
});

Which TableContainer translates to (6 td's because of the widget label):

<table>
    <tr>
    <td>widget1 label</td><td>widget1</td>
    <td>widget2 label</td><td>widget2</td>
    <td>widget3 label</td><td>widget3</td>
    </tr>
</table>

How can I make the 3rd set of <td> as empty td's

Currently I have tried skipping an index, because I thought that it would just skip placing any widgets on the 3rd set of col. For example:

tableContainer.addChild(productTypeIdTextBox,0);
tableContainer.addChild(dummyButton,1);
tableContainer.addChild(dummyTextBox1,3);

The above code only results in a javascript error. (here is the jsfiddle [http://jsfiddle.net/CfXqM/1/] to demo skipping an index results to an error)

The only thing I could think of is to create a dummy widget that has <div>&nbsp</div>, then addChild that dummy widget to the table container.

Is there any other way to do this without creating a dummy widget?

EDIT:

What I actually want to achieve would be a table layout like this from using TableContainer:

|column1 | column2 | column3 | column4
|label   | widget  |         |
|label   | widget  |  label  | widget
|label   | widget  |         |
|label   | widget  |         |

Where in there would be times when I may or may not add widgets to columns 3 and 4

EDIT:

The solution I took came from Richard. Instead of the suggested text box, I used a contentpane. http://jsfiddle.net/CMXG5/2/

Answer 1

A hacky way that I've done this is by adding a TextBox to the TableContainer to the index that I want and then setting the label to be " ", and the textbox style to be "display: none;" (see code below). I normally use this as a placeholder until I want to put something in that slot, after which I would either adjust the TextBox or remove the child from the TableContainer and add a new child back.

var cb = new CheckBox({
  "style": "display:none",
  constraints: {places: 0}
});
tableContainer.addChild(cb);