表具有相同的CSS屬性不排隊正確

我有兩個表：表具有相同的CSS屬性不排隊正確

<div class="selectionTable"> 
    <table class="table"> 
     <tr> 
      <td> 
      </td> 
      <td> 
      </td> 
      <td> 
       <asp:Label ID="productThemeFilterLabel" runat="server" Text="Product Filter:" CssClass="labelText"></asp:Label> 
      </td> 
      <td> 
       <asp:DropDownList ID="productThemeFilterDropDown" runat="server" DataSourceID="SqlDataSource3" 
        DataTextField="Name" DataValueField="PK_Product" AutoPostBack="true" OnSelectedIndexChanged="productThemeFilterLabel_OnSelectedIndexChanged" 
        CssClass="dropDownList"> 
       </asp:DropDownList> 
       <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:ApplicationServices %>" 
        SelectCommand="SELECT [Name], [PK_Product] FROM [Product] ORDER BY [Name] ASC"> 
       </asp:SqlDataSource> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <asp:Label ID="themeTypeDropDownLabel" runat="server" Text="Theme Type:" CssClass="labelText"></asp:Label> 
      </td> 
      <td> 
       <asp:DropDownList ID="themeTypeDropDown" runat="server" DataSourceID="SqlDataSource2" 
        DataTextField="Type" DataValueField="PK_ThemeType" CssClass="dropDownList"> 
       </asp:DropDownList> 
       <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ApplicationServices %>" 
        SelectCommand="SELECT [Type], [PK_ThemeType] FROM [ThemeType] WHERE [Deleted] = 0 ORDER BY [Type] ASC"> 
       </asp:SqlDataSource> 
      </td> 
      <td> 
       <asp:Label ID="themeListLabel" runat="server" Text="Assign to Theme:" CssClass="labelText"></asp:Label> 
      </td> 
      <td> 
       <asp:DropDownList ID="themeListDropDown" runat="server" DataSourceID="SqlDataSource4" 
        DataTextField="Name" DataValueField="PK_Theme" CssClass="dropDownList"> 
       </asp:DropDownList> 
       <asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:ApplicationServices %>" 
        SelectCommand="SELECT PK_Theme, Theme.Name FROM Theme, ProductTheme WHERE ProductTheme.ProductID = @productIdParam AND ProductTheme.ThemeId = Theme.PK_Theme ORDER BY [Name] ASC"> 
        <SelectParameters> 
         <asp:QueryStringParameter Name="productIdParam" DefaultValue="1" Type="String" /> 
        </SelectParameters> 
       </asp:SqlDataSource> 
      </td> 
     </tr> 
    </table> 
</div>

而且

<div class="selectionTable"> 
    <table class="table"> 
     <tr> 
      <td> 
      <asp:Label ID="addThemeTypeLabel" runat="server" Text="Name:" CssClass="labelText"></asp:Label> 
      </td> 
      <td> 
      <div id="test"> 
       <asp:TextBox ID="ThemeTypeInput" runat="server"></asp:TextBox> 
       </div> 
      </td> 
      <td> 
      </td> 
      <td> 
      </td> 
     </tr> 
    </table> 
</div>

正如你可以看到他們影響他們的同一類。然而，他們沒有正確對齊：

enter image description here

如果我選中它，你可以看到該表是關閉：

enter image description here

這裏是頁面的CSS：

#popup 
    { 
     width: 400px; 
     height: 250px; 
     overflow: scroll; 
     background-color: #EAFDB3; 
     border: solid 2px black; 
    } 
    #popup2 
    { 
     width: 400px; 
     height: 250px; 
     background-color: #EAFDB3; 
     border: solid 2px black; 
    } 
    .table 
    { 
     margin-left: auto; 
     margin-right: auto; 
     width: 900px; 
    } 

    .selectionTable th, .selectionTable td 
    { 
     height: 3.25em; 
    } 
    .dropDownList 
    { 
     width: 206px; 
    } 
    .labelText 
    { 
     font-weight: bold; 
     font-size: medium; 
    } 
    form, .spacer 
    { 
     clear: both; 
     height: 1px; 
    } 

    .myform 
    { 
     margin: 0 auto; 
     width: 60em; 
     padding: 5px; 
    } 

    #stylized 
    { 
     border: solid 2px #7fc041; 
     background: #FDE16D; 
    } 
    #stylized h1 
    { 
     font-size: 4em font-weight:bold; 
     margin-bottom: 0.5em; 
     margin-top: -0.5em; 
     text-align: center; 
     padding: 1em; 
    } 

    #stylized label 
    { 
     display: block; 
     text-align: right; 
     width: 210px; 
     float: left; 
    } 
    #stylized input 
    { 
     width: 200px; 
    }

我在做什麼錯了？

來源

2013-07-24 David Tunnell

我認爲你會爲自己省下不少麻煩，如果你慢慢地轉換這個表中的所有了......這是很殘酷地看待現狀。你有沒有考慮過？ –

如果您希望單元格（''）對齊，則不能將它們分解爲單獨的表格。把第二個表放在第一個表中，他們會更好地對齊。 –

第二個表中定義的列寬固定它：

來源

2013-07-25 18:38:47

表具有相同的CSS屬性不排隊正確

回答

相關問題