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

Posted 2023-03-27

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

【英文标题】：How can I reduce the width of an HtmlTableCell or otherwise join together two controls in an HtmlTableRow?

【发布时间】：2015-08-18 08:30:24

【问题描述】：

我正在动态创建几个 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”，具体取决于“员工？”复选框的状态）。

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

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

|_| Employee?   SSN |___________|

...不是这样的：

|_| Employee?   SSN              |___________|

如何“贴紧”标签（“SSN”）和以下文本框？

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

在大多数情况下，所谓“独立”的 HtmlTableRows 彼此水平排列很好，但我不知道他们为什么/如何这样做，也不知道如何绕过通常需要的功能。

【参考方案1】：

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

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

【讨论】：

这让我充满希望，但它什么也没做（好）；我首先将标签为 12 的单元格的 ColSpan 设置为 12，这使情况变得更糟 - 文本框更远（向右）；然后我尝试了 1、0、-1 的 ColSpans，但没有一个比原来的更好（如尖叫声所示）。最后，我尝试了 -42，因为 42 应该是所有问题的答案，但 -42 似乎（也许在逻辑上）什么都没有。

嘿，我想你会想要增加员工 SSN 行上方的行的 colspan。因此，mailstop 文本框单元格的 colspan 应为 2。这将使其跨越员工 SSN 的标签和文本框单元格。我看到你发布了另一个答案。干杯！

【参考方案2】：

这并不是对我的具体问题的真正答案（我没有找到解决方法），但这是我最终得到的解决方案：将这些控件添加到页面中，而不是作为表格的一部分，而是“独立”：

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