显示元素时表格左对齐答案

【问题标题】：Table aligning left when elements are shown显示元素时表格左对齐
【发布时间】：2013-03-23 23:38:24
【问题描述】：

我有这个 HTML 代码：

<html>
    <head>
        <script type="text/javascript">
            function showStuff(id) {
                var e = document.getElementById(id);
                if (e.style.display == 'block') e.style.display = 'none';
                else e.style.display = 'block';
            }
        </script>
    </head>
    <body>
        <FORM name=myForm>
            <TABLE border=0 align=center>
                <TBODY>
                    <TR>
                        <TD align=right>Quiz/Test Title:</TD>
                        <TD align=left>
                            <INPUT size=25 type=text name=t>
                        </TD>
                    </TR>
                    <TR>
                        <TD align=right>
                            <input type="button" value="Show/Hide" onclick="showStuff('multiplechoice')">
                        </TD>
                    </TR>
                </TBODY>
                <TBODY id="multiplechoice" style="display: none;" align=center>
                    <TR>
                        <TD align=right>
                            <h3>Multiple Choice</h3>
                        </TD>
                        </TD>
                        <TR>
                            <TD align=right>Section Name:</TD>
                            <TD align=left>
                                <INPUT size=20 type=text name=section1>
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Directions:</TD>
                            <TD align=left>
                                <INPUT size=71 type=text name=directions1>
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Question Number:</TD>
                            <TD align=left>
                                <INPUT size=2 type=text name=n1 id=n1 value=1 onkeypress="return alpha(event,numbers)">
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Question:</TD>
                            <TD align=left>
                                <textarea rows=2 cols=55 name=q1 id=q1></textarea>
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Answer A:</TD>
                            <TD align=left>
                                <INPUT size=35 type=text name=a1>
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Answer B:</TD>
                            <TD align=left>
                                <INPUT size=35 type=text name=b1>
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Answer C:</TD>
                            <TD align=left>
                                <INPUT size=35 type=text name=c1>
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Answer D:</TD>
                            <TD align=left>
                                <INPUT size=35 type=text name=d1>
                            </TD>
                        </TR>
                        <TR>
                            <TD align=right>Answer (A,B,C,D):</TD>
                            <TD align=left>
                                <INPUT size=1 type=text name=correct1 onkeyup="upper(this)" onkeypress="return alpha(event,letters)" maxlength="1">
                            </TD>
                        </TR>
                </TBODY>
            </TABLE>
        </FORM>
    </body>
</html>

好的，问题是当我单击显示/隐藏时，它会显示表单，但会将表单中的所有内容移到左侧。我希望它保持在中心对齐。有没有办法做到这一点？我省略了与其他所有功能相关联的所有其他功能，所以不用担心它会起作用。非常感谢任何帮助。

【问题讨论】：

标签： javascript html alignment

【解决方案1】：

为什么不把你的两个TBodys 放到单独的表中？

如下所示：

<FORM name=myForm>
<TABLE border=0 align=center>
    <TBODY>
         <TR>
             <TD align=right>Quiz/Test Title:</TD>
             <TD align=left>
                <INPUT size=25 type=text name=t>
            </TD>
        </TR>
        <TR>
             <TD align=right><input type="button" value="Show/Hide" onclick="showStuff('multiplechoice')">
             </TD>
        </TR>
     </TBODY>
</table>
<table border=0 align=center>
     <TBODY id="multiplechoice" style="display: none;" align=center>
         <TR>
            <TD align=right><h3>Multiple Choice</h3></TD>
             </TR>
         <TR>
            <TD align=right>Section Name:</TD>
            <TD align=left><INPUT size=20 type=text name=section1></TD>
             </TR>
         <TR>
            <TD align=right>Directions:</TD>
            <TD align=left><INPUT size=71 type=text name=directions1></TD>
             </TR>
         <TR>
            <TD align=right>Question Number:</TD>  
            <TD align=left><INPUT size=2 type=text name=n1 id=n1 value=1 onkeypress="return alpha(event,numbers)"></TD>
             </TR>   
         <TR>
            <TD align=right>Question:</TD>
            <TD align=left><textarea rows=2 cols=55 name=q1 id=q1></textarea></TD> 
             </TR>
         <TR>
            <TD align=right>Answer A:</TD>
            <TD align=left><INPUT size=35 type=text name=a1></TD></TR>
         <TR>
            <TD align=right>Answer B:</TD>
            <TD align=left><INPUT size=35 type=text name=b1></TD>
             </TR>
         <TR>
            <TD align=right>Answer C:</TD>
            <TD align=left><INPUT size=35 type=text name=c1></TD>
             </TR>
         <TR>
            <TD align=right>Answer D:</TD>
            <TD align=left><INPUT size=35 type=text name=d1></TD>
             </TR>
         <TR>
            <TD align=right>Answer (A,B,C,D):</TD>
            <TD align=left><INPUT size=1 type=text name=correct1 onkeyup="upper(this)" onkeypress="return alpha(event,letters)"   maxlength="1"></TD>
             </TR>
     </TBODY>
</TABLE>
</FORM>

它可以解决所有问题。看到这个working codepen

【讨论】：