javascript - CSS 绝对定位表格中的表格

Question

我们有一个由我们的(经典)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>"   

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

.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 运行以显示/隐藏详细信息表:

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

所以我需要在不同的浏览器中始终将“细节”或调整表放在中间，就像在 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"">")

那么如何让内表始终显示在中间呢？

谢谢菲利普

Answer 1

如果它只是表格中的一行，那么您可以使用 css 将其定位并居中:

tr {
    text-align: center;
}

或者在td上试试