css - 如何限制 Sharepoint 2010 WebPart 中 HtmlTable 中单元格的宽度？

Question

我想在 Sharepoint 2010 WebPart 中限制 HTMLTableCells 的宽度。

当我在表中只有一行时，我可以这样做:

var row1 = new HtmlTableRow();

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

这是我得到的，没问题:

...但是当我有多行时它不起作用 - 单元格宽度太宽，即使我已将它们全部设置为“88”:

这是上下文中的代码(第 3 行和第 4 行的代码实际上应该与第 2 行的代码相同，但我将其全部粘贴以“完全公开”):

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

为什么 1 行有效，但多行无效？后续行的代码与初始行的代码基本相同。

Answer 1

原来我还必须指定文本框的宽度。所以这些:

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

...必须变成这样:

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

现在整个 shebang 看起来应该是这样。

更新

或者，更迷人(抱歉，优雅):

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