如何减小 HtmlTableCell 的宽度或以其他方式将 HtmlTableRow 中的两个控件连接在一起？

Question

我正在动态创建多个 HtmlTableRows 并向它们添加单元格，如下所示：

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

此代码生成您在此处看到的内容：

但我希望文本框（黄色的）紧贴其标签（尖叫截图中的 "SSN"，但也可以是 "ITIN"，具体取决于 "Employee?"复选框）。

所以我们这里有一个包含两个元素（"Mail Stop:" 标签及其 "associated" 文本框）的 HtmlTableRow 和另一个包含三个元素（复选框、标签和文本框）的 HtmlTableRow。

第二个 HtmlTableRow 显然采用了上面那个的布局提示（将单元格对齐到相同的 X 坐标值），但为什么呢？我该如何规避呢？我希望第二行看起来像这样：

|_| Employee?   SSN |___________|

...不是这样的：

|_| Employee?   SSN              |___________|

如何 "snug up" 标签 ("SSN") 和下面的文本框？

我尝试将标签和文本框放在同一个 HtmlTableCell 中，但是当我尝试将两个控件添加到单个 HtmlTableCell 时它在运行时崩溃了。

在大多数情况下，据说 "independent" HtmlTableRows 彼此水平排列是很好的，但我不知道 why/how 他们这样做，也不知道通常如何绕过它-理想的功能。

Answer 1

HtmlTableCell 似乎有一个 ColSpan 属性。您可以尝试在其他行上设置它以按照您想要的方式进行格式化：

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

Answer 2

这并不是我的具体问题的真正答案（我没有找到解决方法），但这是我最终得到的解决方案：将这些控件添加到页面而不是 table，但是 "standalone":

// These elements were not aligning right as row 7 of the section 1 table, so I am just adding them one by one
CheckBox ckbxEmployeeQ = new CheckBox
{
    CssClass = "dplatypus-webform-field-input",
    ID = "ckbxEmp",
};
ckbxEmployeeQ.Text = "Employee?";
this.Controls.Add(ckbxEmployeeQ);

AddVerticalSpace();

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

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

AddVerticalSpace();

如何减小 HtmlTableCell 的宽度或以其他方式将 HtmlTableRow 中的两个控件连接在一起？

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

html

c#

asp.net

web-parts

sharepoint-2010