How can I restrict the width of cells in an HtmlTable in a Sharepoint 2010 WebPart?

Question

I want to restrict the width of HTMLTableCells in a Sharepoint 2010 WebPart.

I can do it when I only have one row in the table like so:

var row1 = new HtmlTableRow();

var cellColTitle1 = new HtmlTableCell();
cellColTitle1.Width = "88px";
cellColTitle1.Style.Add("text-align", "center");
row1.Cells.Add(cellColTitle1);

Here's what I get, and it is fine:

...but when I have multiple rows it doesn't work - the cell widths are too wide, even though I have set them all to "88":

Here is the code in context (the code for rows 3 and 4 should be virtually identical to that for row 2, but am pasting it all for "full disclosure"):

private HtmlTable GetSection5Table()
{
    HtmlTable dynamicTable = new HtmlTable();
    dynamicTable.Border = 2;

    // Create Row 1
    var row1 = new HtmlTableRow();

    var cellColTitle1 = new HtmlTableCell();
    cellColTitle1.Width = "88px";
    cellColTitle1.Style.Add("text-align", "center");
    row1.Cells.Add(cellColTitle1);
    var cellColTitle2 = new HtmlTableCell();
    cellColTitle2.Width = "88px";
    cellColTitle2.Style.Add("text-align", "center");
    row1.Cells.Add(cellColTitle2);
    var cellColTitle3 = new HtmlTableCell();
    cellColTitle3.Width = "88px";
    cellColTitle3.Style.Add("text-align", "center");
    row1.Cells.Add(cellColTitle3);
    var cellColTitle4 = new HtmlTableCell();
    cellColTitle4.Width = "88px";
    cellColTitle4.Style.Add("text-align", "center");
    row1.Cells.Add(cellColTitle4);
    var cellColTitle5 = new HtmlTableCell();
    cellColTitle5.Width = "88px";
    cellColTitle5.Style.Add("text-align", "center");
    row1.Cells.Add(cellColTitle5);
    var cellColTitle6 = new HtmlTableCell();
    cellColTitle6.Width = "88px";
    cellColTitle6.Style.Add("text-align", "center");
    row1.Cells.Add(cellColTitle6);

    var indexStr = new Label
    {
        CssClass = "finaff-webform-field-label",
        Text = "Index"
    };
    cellColTitle1.Controls.Add(indexStr);
    var fundStr = new Label
    {
        CssClass = "finaff-webform-field-label",
        Text = "Fund"
    };
    fundStr.Style.Add("text-align", "center");
    cellColTitle2.Controls.Add(fundStr);
    var orgStr = new Label
    {
        CssClass = "finaff-webform-field-label",
        Text = "Organization"
    };
    orgStr.Style.Add("text-align", "center");
    cellColTitle3.Controls.Add(orgStr);
    var accountStr = new Label
    {
        CssClass = "finaff-webform-field-label",
        Text = "Account"
    };
    accountStr.Style.Add("text-align", "center");
    cellColTitle4.Controls.Add(accountStr);
    var activityStr = new Label
    {
        CssClass = "finaff-webform-field-label",
        Text = "Activity"
    };
    activityStr.Style.Add("text-align", "center");
    cellColTitle5.Controls.Add(activityStr);
    var amountStr = new Label
    {
        CssClass = "finaff-webform-field-label",
        Text = "Amount"
    };
    amountStr.Style.Add("text-align", "center");
    cellColTitle6.Controls.Add(amountStr);
    dynamicTable.Rows.Add(row1); 

    //// Create row 2
    var row2 = new HtmlTableRow();

    var cellColIndex1 = new HtmlTableCell();
    cellColIndex1.Width = "88px";
    row2.Cells.Add(cellColIndex1);
    var cellColFund1 = new HtmlTableCell();
    cellColFund1.Width = "88px";
    row2.Cells.Add(cellColFund1);
    var cellColOrg1 = new HtmlTableCell();
    cellColOrg1.Width = "88px";
    row2.Cells.Add(cellColOrg1);
    var cellColAccount1 = new HtmlTableCell();
    cellColAccount1.Width = "88px";
    row2.Cells.Add(cellColAccount1);
    var cellColActivity1 = new HtmlTableCell();
    cellColActivity1.Width = "88px";
    row2.Cells.Add(cellColActivity1);
    var cellColAmount1 = new HtmlTableCell();
    cellColAmount1.Width = "88px";
    row2.Cells.Add(cellColAmount1);

    boxIndex1 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"//,
        //Width = 88 //ADJUSTED_TEXTBOX_WIDTH
    };
    cellColIndex1.Controls.Add(boxIndex1);
    boxFund1 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColFund1.Controls.Add(boxFund1);
    boxOrganization1 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColOrg1.Controls.Add(boxOrganization1);
    boxAccount1 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColAccount1.Controls.Add(boxAccount1);
    boxActivity1 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColActivity1.Controls.Add(boxActivity1);
    boxAmount1 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColAmount1.Controls.Add(boxAmount1);

    dynamicTable.Rows.Add(row2);

    // Row 3
    var row3 = new HtmlTableRow();

    var cellColIndex2 = new HtmlTableCell();
    cellColIndex2.Width = "88px";
    row3.Cells.Add(cellColIndex2);
    var cellColFund2 = new HtmlTableCell();
    cellColFund2.Width = "88px";
    row3.Cells.Add(cellColFund2);
    var cellColOrg2 = new HtmlTableCell();
    cellColOrg2.Width = "88px";
    row3.Cells.Add(cellColOrg2);
    var cellColAccount2 = new HtmlTableCell();
    cellColAccount2.Width = "88px";
    row3.Cells.Add(cellColAccount2);
    var cellColActivity2 = new HtmlTableCell();
    cellColActivity2.Width = "88px";
    row3.Cells.Add(cellColActivity2);
    var cellColAmount2 = new HtmlTableCell();
    cellColAmount2.Width = "88px";
    row3.Cells.Add(cellColAmount2);

    boxIndex2 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColIndex2.Controls.Add(boxIndex2);
    boxFund2 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColFund2.Controls.Add(boxFund2);
    boxOrganization2 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColOrg2.Controls.Add(boxOrganization2);
    boxAccount2 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColAccount2.Controls.Add(boxAccount2);
    boxActivity2 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColActivity2.Controls.Add(boxActivity2);
    boxAmount2 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColAmount2.Controls.Add(boxAmount2);
    dynamicTable.Rows.Add(row3);

    // Row 4
    var row4 = new HtmlTableRow();

    var cellColIndex3 = new HtmlTableCell();
    cellColIndex3.Width = "88px";
    row4.Cells.Add(cellColIndex3);
    var cellColFund3 = new HtmlTableCell();
    cellColFund3.Width = "88px";
    row4.Cells.Add(cellColFund3);
    var cellColOrg3 = new HtmlTableCell();
    cellColOrg3.Width = "88px";
    row4.Cells.Add(cellColOrg3);
    var cellColAccount3 = new HtmlTableCell();
    cellColAccount3.Width = "88px";
    row4.Cells.Add(cellColAccount3);
    var cellColActivity3 = new HtmlTableCell();
    cellColActivity3.Width = "88px";
    row4.Cells.Add(cellColActivity3);
    var cellColAmount3 = new HtmlTableCell();
    cellColAmount3.Width = "88px";
    row4.Cells.Add(cellColAmount3);

    boxIndex3 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColIndex3.Controls.Add(boxIndex3);
    boxFund3 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColFund3.Controls.Add(boxFund3);
    boxOrganization3 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColOrg3.Controls.Add(boxOrganization3);
    boxAccount3 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColAccount3.Controls.Add(boxAccount3);
    boxActivity3 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColActivity3.Controls.Add(boxActivity3);
    boxAmount3 = new TextBox()
    {
        CssClass = "finaff-webform-field-input"
    };
    cellColAmount3.Controls.Add(boxAmount3);

    dynamicTable.Rows.Add(row4);

    return dynamicTable;
}

Why does 1 row work, but multiple rows do not? The code is fundamentally the same for subsequent rows as it is for the initial row.

Answer 1

It turns out I have to specify the width of the TextBoxes, too. So these:

boxIndex1 = new TextBox()
{
    CssClass = "finaff-webform-field-input"
};

...had to become like so:

boxIndex1 = new TextBox()
{
    CssClass = "finaff-webform-field-input",
    Width = 88
};

Now the whole shebang looks like it should.

UPDATE

Or, more glamorously (sorry, elegantly):

const int TEXTBOX_WIDTH = 88;
const String CELL_WIDTH = "88px";
. . .
var cellColTitle1 = new HtmlTableCell();
cellColTitle1.Width = CELL_WIDTH;
. . .
// Create row 2
. . .
boxIndex1 = new TextBox()
{
    CssClass = "finaff-webform-field-input",
    Width = TEXTBOX_WIDTH
};