CSS 绝对定位 table 在 table 内

Question

我们有一个 table 由我们的（经典）ASP 代码创建

加载页面时看起来像这样...

当用户单击每条记录右侧的 Edit 按钮时，详细信息行可见...

在 IE 中它看起来像这样（这就是我们想要的）：

不幸的是，在 Firefox 和 Chrome 等其他浏览器中，它看起来像这样：

创建它的代码是服务器端 ASP 代码如下：

'For record editing
.Write("<TR class='rowsummary2' style=""display:none;"" id=tr_Edit" & g_lngRowCount & ">")
.Write("<td></td>")
.Write("<td></td>")
.Write("<td></td>")

.Write("<td colspan=""2"" class=""filterback"">")
'.write("<div style=""position:relative;left:150px; display:none;"" id=div_Edit" & g_lngRowCount & ">")
.Write("<table cellspacing=""2px"" cellpadding=""2px"" width=""100%"" border=""0"">")
    .Write("<tr>")
        .Write("<td class=""summaryheader2"" align=""left"" colspan=""2"">")
            .Write("<b>Edit ShPP</b>")
        .Write("</td>")
    .Write("</tr>")
    .Write("<tr>")
        .Write("<td align=""left"" width=""50%"">")
            .Write("<table width=""100%"" border=""0"" cellspacing=""2"" cellpadding=""2"">")                                   
                .Write("<tr>")
                    .Write("<td width=""20%"" class=""mandatory"">ShPP Amount Due</td>")
                    if not Null2Bool(adoRs("IsPaid")) then
                        .Write("<td colspan=""3""><input type='text' class='inputbox' name='txtShPPAmountDue' " _
                        & " id=txtShPPAmountDue" & g_lngRowCount _
                        & " value="  & formatnumber(adoRs("ShPPPayment"), 2,,,False) _
                        & " style='width:75px' onKeyPress='javascript: validKeyPressTest(/[0-9,.]$/, event)'" _
                        & " onblur='javascript: frmShPP.txtShPPPayment.value = this.value;'" _
                        & " ></input>")
                    else
                        .Write("<td class=""summarytext"">" & formatnumber(adoRs("ShPPPayment"), 2,,,False) & "</td>")
                    End if
                .Write("</tr>")

                .Write("<tr>")
                    .Write("<td valign=""top"" width=""20%"" class=""mandatory"">Reason</td>")
                    if not Null2Bool(adoRs("IsPaid")) then
                        .Write("<td colspan=""3"" class=""summarytext""><textarea " _
                        & " id=txtComment" & g_lngRowCount _
                        & " name=""txtComment"">" & null2str(adoRs("Notes")) & _
                        "</textarea></td>")
                    else
                        .Write("<td colspan=""3"" class=""summarytext"">" & null2str(adoRs("Notes")) & "</td>")
                    End if
                .Write("</tr>")
            .Write("</table>")
        .Write("</td>")
    .Write("</tr>")

    .Write("<tr>")
        .Write("<td class=""summaryheader2"" align=""right"" colspan=""2"">")
            if not Null2Bool(adoRs("IsPaid")) then
                .Write "<input title='Save' ID='btnSave" _
                        & g_lngRowCount _
                        & "' type='button' name='btnSave" _
                        & g_lngRowCount _
                        & "' value='Save' onclick=""javasript:checkAndSubmit('updaterow', " _
                        & adoRs("Period") _
                        & ")"" class='formbutton' onmouseover='this.className=&#39;formbuttonhover&#39;' onmouseout='this.className=&#39;formbutton&#39;' onfocus='this.className=&#39;formbuttonhover&#39;' onblur='this.className=&#39;formbutton&#39;'/>&nbsp;&nbsp;&nbsp;"                           
            End if
            .Write "<input title='Cancel' ID='btnCancel" _
                    & g_lngRowCount _
                    & "' type='button' name='btnCancel" _
                    & g_lngRowCount _
                    & "' value='Cancel' onclick='javasript:CancelEdit(" _
                    & g_lngRowCount & ")' class='formbutton' onmouseover='this.className=&#39;formbuttonhover&#39; ' _onmouseout='this.className=&#39;formbutton&#39;' onfocus='this.className=&#39;formbuttonhover&#39;' onblur='this.className=&#39;formbutton&#39;'/>"                            
        .Write("</td>")
    .Write("</tr>")
.Write("</table>")
.Write("</td>") ' Filterback
.Write "</tr>"

ASP 代码中放入包含 table 的隐藏 TR 元素的部分是

.Write("<TR class='rowsummary2' style=""display:none;"" id=tr_Edit" & g_lngRowCount & ">")
.Write("<td></td>")
.Write("<td></td>")
.Write("<td></td>")

.Write("<td colspan=""2"" class=""filterback"">")
'.write("<div style=""position:relative;left:150px; display:none;"" id=div_Edit" & g_lngRowCount & ">")
.Write("<table cellspacing=""2px"" cellpadding=""2px"" width=""100%"" border=""0"">")
.Write("<tr>")

因此，对于每条记录，它都会创建一个隐藏的行，其中包含一个 ID，如 tr_Edit3（对于记录 3）和 Edit 的 onclick 事件下面的按钮 javascript 运行到 show/hide 详细信息 table:

function HideEditTable(rowNum, IsPaid) {        
    var iTotRows = document.getElementById("txtRowCount").value;
    for (i = 1; i <= iTotRows; i++) {
        document.getElementById("tr_Edit" + i).style.display = 'none';
        //document.getElementById("div_Edit" + i).style.display = 'none';           
    }
    
    document.getElementById("tr_Edit" + rowNum).style.display = 'block';
    //document.getElementById("div_Edit" + rowNum).style.display = 'block';
    if (IsPaid == 0) {
        frmShPP.txtShPPPayment.value = document.getElementById("txtShPPAmountDue" + rowNum).value;
        frmShPP.txtNotes.value = document.getElementById("txtComment" + rowNum).value;
        frmShPP.txtLumpsum.value = false; // default
    }
}

所以我需要让“细节”或调整 table 在不同的浏览器中始终处于中心位置，就像在 IE11 中一样...

我尝试在 table 周围放置一个 div 元素，我可以使用 css 绝对定位它，但没有成功（搞砸了，但很好！）

.Write("<td colspan=""2"" class=""filterback"">")
    '.write("<div style=""position:relative;left:150px; display:none;"" id=div_Edit" & g_lngRowCount & ">")
    .Write("<table cellspacing=""2px"" cellpadding=""2px"" width=""100%"" border=""0"">")

那么我怎样才能让内部 table 始终显示在中间？

谢谢菲利普

Answer 1

如果它只是 table 中的一行，那么您可以使用 css:

定位并居中它

tr {
    text-align: center;
}

或在 td

上尝试

Answer 2

所以为了让它工作，事实证明我们所要做的就是改变客户端 javascript

这在 FF/Chrome 中不起作用：

document.getElementById("tr_Edit" + rowNum).style.display = 'block';

但是当我们取出 block 时，它神奇地起作用了：

document.getElementById("tr_Edit" + rowNum).style.display = '';

CSS 绝对定位 table 在 table 内

CSS absolute positioning a table within a table

javascript

css

html-table

cross-browser

asp-classic