How can I reduce the width of an HtmlTableCell or otherwise join together two controls in an HtmlTableRow?

Question

I am dynamically creating several HtmlTableRows and adding cells to them, like so:

HtmlTable dynamicTable = new HtmlTable();

. . .

// Create row 6
var row6 = new HtmlTableRow();
var cellLitCtrl_6 = new HtmlTableCell();
var cellTxtbx_6 = new HtmlTableCell();
row6.Cells.Add(cellLitCtrl_6);
row6.Cells.Add(cellTxtbx_6);
var mailStopStr = new Label
{
    CssClass = "dplatypus-webform-field-label",
    Text = "Mail Stop:"
};
cellLitCtrl_6.Controls.Add(mailStopStr);

boxMailStop = new TextBox
{
    CssClass = "dplatypus-webform-field-input"
};
cellTxtbx_6.Controls.Add(boxMailStop);
dynamicTable.Rows.Add(row6);

// Create row 7
var row7 = new HtmlTableRow();
var cellCkbx_7 = new HtmlTableCell();
var cellLitCtrl_7 = new HtmlTableCell();
var cellTxtbx_7 = new HtmlTableCell();
row7.Cells.Add(cellCkbx_7);
row7.Cells.Add(cellLitCtrl_7);
row7.Cells.Add(cellTxtbx_7);

CheckBox ckbxEmployeeQ = new CheckBox
{
    CssClass = "dplatypus-webform-field-input",
    ID = "ckbxEmp",
};
ckbxEmployeeQ.Text = "Employee?";
cellCkbx_7.Controls.Add(ckbxEmployeeQ);

var SSNOrITINStr = new Label
{
    CssClass = "dplatypus-webform-field-label",
    Text = "ITIN:",
    ID = "lblSSNOrITIN"
};
cellLitCtrl_7.Controls.Add(SSNOrITINStr);

boxSSNOrITIN = new TextBox
{
    CssClass = "dplatypus-webform-field-input",
    ID = "txtbxSSNOrITIN",
    Width = 80,
    MaxLength = 12
};
cellTxtbx_7.Controls.Add(boxSSNOrITIN);
dynamicTable.Rows.Add(row7);

This code produces what you see here:

But I want the textbox (the yellow one) to be snug up against its label ("SSN" in the screamshot, but it can also be "ITIN" depending on the state of the "Employee?" checkbox).

So what we have here is an HtmlTableRow with two elements (the "Mail Stop:" label and its "associated" Textbox) and another HtmlTableRow with three elements (the checkbox, label, and textbox).

The second HtmlTableRow is obviously taking its layout cue from the one above (aligning cells to to the same X coordinate value), but why? And how can I circumvent that? I want the second row to look like this:

|_| Employee?   SSN |___________|

...not like this:

|_| Employee?   SSN              |___________|

How can I "snug up" the label ("SSN") and the following Textbox?

I tried putting the label and textbox in the same HtmlTableCell, but it blew up at runtime when I tried to add two Controls to a single HtmlTableCell.

For the most part, it's nice that the supposedly "independent" HtmlTableRows horizontally line up with each other, but I don't know why/how they do that, nor how to bypass that usually-desirable feature.

Answer 1

HtmlTableCell seems to have a ColSpan property. You may try setting that on the other rows to format it the way you would like:

https://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmltablecell.colspan(v=vs.110).aspx