html - 具有相同 CSS 属性的表格未正确排列

Question

我有两张桌子：

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

如您所见，它们具有影响它们的相同类。但是，它们没有正确对齐：

如果我突出显示它，您可以看到该表已关闭：

这是页面的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;
    }

我究竟做错了什么？

Answer 1

在第二个表中定义列宽修复它：