间距和宽度表CSS

Question

我需要这方面的帮助。我不太擅长 CSS/布局或 UI 设计。我只是想知道怎么做这个无法弄清楚，为什么它会在这些桌子上做这些事情：

在红色框中，我的问题是其他数字和问题是对齐的，但是当涉及到数字 4 时，它就延伸了。

下面是我的html代码：

       <asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<div id="divQuestionnaires" runat="server" class="SiteWide_PageContent_Centered">
    <table ID="tblQuestionnaires1" runat="server">
        <tr >
            <th Style="padding-right:5px; padding-bottom:40px; white-space: nowrap; font-size: 15px; font-weight:bold;">
                <label ID="lbl1" 
                    runat="server"                      
                    text="1."/>
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;">
                <label ID="lblQuestion1"
                    runat="server"                    
                    text="Question1" />
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;" >
                <TextBox ID ="txtAnswer1" runat="server"  CssClass="width8em" width="80pt"/>
            </th>
        </tr>
        <tr >
            <th Style="padding-right:5px; padding-bottom:40px; white-space: nowrap; font-size: 15px; font-weight:bold;">
                <label ID="lbl2" 
                    runat="server"
        text="2."/>
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;">
                <label ID="lblQuestionnaire2"
                    runat="server"                       
                    text="Question2" />
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;" >
               <RadioButtonList ID="rblQ2YesNo" runat="server" RepeatDirection="Horizontal">
                   <asp:ListItem Value=1 Text="[Yes]"/>
                   <asp:ListItem Value=2 Text="[No]"/>
               </RadioButtonList>
            </th>
        </tr>
        <tr>
            <th Style="padding-right:5px; padding-bottom:40px; white-space: nowrap; font-size: 15px; font-weight:bold;">
                <label ID="lbl2a" 
                    runat="server"                        
                    text="2a."/>
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;">
                <label ID="lblQuestionnaire2a"
                    runat="server"                       
                    text="Question2a" />
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;" >
                <TextBox ID ="txtAnswer2a" runat="server"  CssClass="width8em" width="80pt"/>
            </th>
        </tr>
         <tr >
            <th Style="padding-right:5px; padding-bottom:40px; white-space: nowrap; font-size: 15px; font-weight:bold;">
                <label ID="lbl3" 
                    runat="server"                        
                    text="3."/>
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;">
                <label ID="lblQuestionnaire3"
                    runat="server"                       
                    text="Question3" />
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;" >
               <RadioButtonList ID="rblQ3YesNo" runat="server" RepeatDirection="Horizontal">
                   <asp:ListItem Value=1 Text="[Yes]"/>
                   <asp:ListItem Value=2 Text="[No]"/>
               </RadioButtonList>
            </th>
        </tr>
         <tr >
            <th Style="padding-right:5px; padding-bottom:40px; white-space: nowrap; font-size: 15px; font-weight:bold;">
                <label ID="lbl3a" 
                    runat="server"                        
                    text="3a."/>
            </th>
            <th Style="padding-right:20px; padding-bottom:10px; white-space: nowrap; font-size: 15px;">
                <label ID="lblQuestionnaire3a"
                    runat="server"                       
                    text="Question3a" />
            </th>
        </tr>           
    </table>
</div>
 <div id="divQuestionnaires2" runat="server" class="SiteWide_PageContent_Centered">
    <table runat="server" ID="tblQuestionnaires2" style="padding-top:40px;table-layout:fixed">
       <tr >
            <th Style="padding-right:5px; padding-bottom:40px; white-space: nowrap; font-size: 15px; font-weight:bold;">
                <label ID="DNR_Label1" 
                    text="4."/>
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;">
                <label ID="lblQuestion4"
                    runat="server"                       
                   text="Question4" />
            </th> 
        </tr>
        <tr>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;" >
                <CheckBoxList runat="server" ID="chkLstAnswer4" RepeatDirection="Horizontal">
                    <asp:ListItem Value="1" Text="[Increased]" />
                    <asp:ListItem Value="2" Text="[Decreased]" />
                    <asp:ListItem Value="3" Text="[Remained the same]" />
                    <asp:ListItem Value="4" Text="[Don't know]" />
                </CheckBoxList>
            </th>
        </tr>
    </table>
</div>

<div  id="divChartForQ3a" runat="server" class="SiteWide_PageContent_Centered">
    <table runat="server" ID="tblWMZ" style="border-collapse:collapse;white-space:nowrap;word-wrap:break-word;font-size:12px;">
        <tr BorderWidth="1">
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                <label runat="server" ID="lblHeadeWMZhunt"
                               text=""/>
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                  <label runat="server" ID="lblHeaderDaysHuntedBow"
                                text=""/>
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                  <label runat="server" ID="lblHeaderDaysHuntedGun"
                                text=""/>
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                  <label runat="server" ID="lblHeaderNoDeerSeen"
                                text=""/>
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                   <label runat="server" ID="lblHeaderNoCoyotesSeen"
                                text=""/>
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                  <label runat="server" ID="lblHeaderNoBearsSeen"
                               text=""/>                                         
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                  <label runat="server" ID="lblHeaderNoMooseBullsSeen"
                               text=""/>
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                 <label runat="server" ID="lblHeaderNoMooseCowsSeen"
                               text=""/>                    
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                  <label runat="server" ID="lblHeaderNoMooseCalvesSeen"
                               text=""/>
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                  <label runat="server" ID="lblHeaderUnknown"
                               text=""/>
            </th>                  
        </tr>
            <tr BorderWidth="1">
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtWMZhunt" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtDaysHuntedBow" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtDaysHuntedGun" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtNoDeerSeen" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtNoCoyotesSeen" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtNoBearsSeen" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtNoMooseBullsSeen" runat="server" CssClass="chartBox"/>
                </th> 
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtNoMooseCowsSeen" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtNoMooseCalvesSeen" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtUnknown" runat="server" CssClass="chartBox"/>
                </th>
            </tr>
        </table>
</div>

    

这是第 4 列的 CSS：

这是第 4 列问题的 CSS：

Answer 1

Hi bro

检查一下现在是否已修复？

您错误地将问题 4 放在表格之外

我把代码99到110（）放在代码第82行，写成（）

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<div id="divQuestionnaires" runat="server" class="SiteWide_PageContent_Centered">
    <table ID="tblQuestionnaires1" runat="server">
        <tr >
            <th Style="padding-right:5px; padding-bottom:40px; white-space: nowrap; font-size: 15px; font-weight:bold;">
                <label ID="lbl1" 
                    runat="server"                      
                    text="1."/>
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;">
                <label ID="lblQuestion1"
                    runat="server"                    
                    text="Question1" />
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;" >
                <TextBox ID ="txtAnswer1" runat="server"  CssClass="width8em" width="80pt"/>
            </th>
        </tr>
        <tr >
            <th Style="padding-right:5px; padding-bottom:40px; white-space: nowrap; font-size: 15px; font-weight:bold;">
                <label ID="lbl2" 
                    runat="server"
        text="2."/>
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;">
                <label ID="lblQuestionnaire2"
                    runat="server"                       
                    text="Question2" />
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;" >
               <RadioButtonList ID="rblQ2YesNo" runat="server" RepeatDirection="Horizontal">
                   <asp:ListItem Value=1 Text="[Yes]"/>
                   <asp:ListItem Value=2 Text="[No]"/>
               </RadioButtonList>
            </th>
        </tr>
        <tr>
            <th Style="padding-right:5px; padding-bottom:40px; white-space: nowrap; font-size: 15px; font-weight:bold;">
                <label ID="lbl2a" 
                    runat="server"                        
                    text="2a."/>
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;">
                <label ID="lblQuestionnaire2a"
                    runat="server"                       
                    text="Question2a" />
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;" >
                <TextBox ID ="txtAnswer2a" runat="server"  CssClass="width8em" width="80pt"/>
            </th>
        </tr>
         <tr >
            <th Style="padding-right:5px; padding-bottom:40px; white-space: nowrap; font-size: 15px; font-weight:bold;">
                <label ID="lbl3" 
                    runat="server"                        
                    text="3."/>
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;">
                <label ID="lblQuestionnaire3"
                    runat="server"                       
                    text="Question3" />
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;" >
               <RadioButtonList ID="rblQ3YesNo" runat="server" RepeatDirection="Horizontal">
                   <asp:ListItem Value=1 Text="[Yes]"/>
                   <asp:ListItem Value=2 Text="[No]"/>
               </RadioButtonList>
            </th>
        </tr>
         <tr >
            <th Style="padding-right:5px; padding-bottom:40px; white-space: nowrap; font-size: 15px; font-weight:bold;">
                <label ID="lbl3a" 
                    runat="server"                        
                    text="3a."/>
            </th>
            <th Style="padding-right:20px; padding-bottom:10px; white-space: nowrap; font-size: 15px;">
                <label ID="lblQuestionnaire3a"
                    runat="server"                       
                    text="Question3a" />
            </th>
        </tr>     
        <!-- Next : -->  
        <tr >
            <th Style="padding-right:5px; padding-bottom:40px; white-space: nowrap; font-size: 15px; font-weight:bold;">
                <label ID="DNR_Label1" 
                    text="4."/>
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;">
                <label ID="lblQuestion4"
                    runat="server"                       
                   text="Question4" />
            </th> 
        </tr> 
     
    </table>
</div>
 <div id="divQuestionnaires2" runat="server" class="SiteWide_PageContent_Centered">
    <table runat="server" ID="tblQuestionnaires2" style="padding-top:40px;table-layout:fixed">
       <!-- Before : 
         <tr >
            <th Style="padding-right:5px; padding-bottom:40px; white-space: nowrap; font-size: 15px; font-weight:bold;">
                <label ID="DNR_Label1" 
                    text="4."/>
            </th>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;">
                <label ID="lblQuestion4"
                    runat="server"                       
                   text="Question4" />
            </th> 
        </tr> -->
        <tr>
            <th Style="padding-right:20px; padding-bottom:40px; white-space: nowrap; font-size: 15px;" >
                <CheckBoxList runat="server" ID="chkLstAnswer4" RepeatDirection="Horizontal">
                    <asp:ListItem Value="1" Text="[Increased]" />
                    <asp:ListItem Value="2" Text="[Decreased]" />
                    <asp:ListItem Value="3" Text="[Remained the same]" />
                    <asp:ListItem Value="4" Text="[Don't know]" />
                </CheckBoxList>
            </th>
        </tr>
    </table>
</div>

<div  id="divChartForQ3a" runat="server" class="SiteWide_PageContent_Centered">
    <table runat="server" ID="tblWMZ" style="border-collapse:collapse;white-space:nowrap;word-wrap:break-word;font-size:12px;">
        <tr BorderWidth="1">
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                <label runat="server" ID="lblHeadeWMZhunt"
                               text=""/>
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                  <label runat="server" ID="lblHeaderDaysHuntedBow"
                                text=""/>
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                  <label runat="server" ID="lblHeaderDaysHuntedGun"
                                text=""/>
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                  <label runat="server" ID="lblHeaderNoDeerSeen"
                                text=""/>
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                   <label runat="server" ID="lblHeaderNoCoyotesSeen"
                                text=""/>
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                  <label runat="server" ID="lblHeaderNoBearsSeen"
                               text=""/>                                         
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                  <label runat="server" ID="lblHeaderNoMooseBullsSeen"
                               text=""/>
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                 <label runat="server" ID="lblHeaderNoMooseCowsSeen"
                               text=""/>                    
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                  <label runat="server" ID="lblHeaderNoMooseCalvesSeen"
                               text=""/>
            </th> 
            <th BorderWidth="1" style="word-wrap:break-word;text-align:center;width:10%">
                  <label runat="server" ID="lblHeaderUnknown"
                               text=""/>
            </th>                  
        </tr>
            <tr BorderWidth="1">
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtWMZhunt" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtDaysHuntedBow" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtDaysHuntedGun" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtNoDeerSeen" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtNoCoyotesSeen" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtNoBearsSeen" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtNoMooseBullsSeen" runat="server" CssClass="chartBox"/>
                </th> 
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtNoMooseCowsSeen" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtNoMooseCalvesSeen" runat="server" CssClass="chartBox"/>
                </th>
                <th BorderWidth="1" CssClass="chartColumn">
                    <TextBox ID="txtUnknown" runat="server" CssClass="chartBox"/>
                </th>
            </tr>
        </table>
</div>