colspan搞砸了css asp.net表

Question

我创建了一个表来整理页面上的项目。该页面是属性的编辑页面。 我使用colspan扩展行并在行中放置一个文本框并将文本框wdith设置为100％，但是，文本框宽度仍然只占用1列而不是3列的空间，就像我预期的那样是代码

 <table align="left" style="width: 100%; float: left" class="FormFormatTable">

    <tr>
        <td style="width: 10%; height: 60px">Alert Name</td>
        <td colspan="3" style=" ">
            <asp:TextBox CssClass="inputBoxes" ID="txtBox_alertName" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td style="width: 10%; height: 60px;">Alert</td>
        <td style="height: 60px; ">
            <asp:DropDownList ID="ddl_AlertTime" runat="server">
                <asp:ListItem Value="1">After</asp:ListItem>
                <asp:ListItem Value="0">Immediately</asp:ListItem>
            </asp:DropDownList>
        </td>
        <td style="height: 60px; ">
            <input id="demo_vertical0" type="number"/></td>
        <td style="height: 60px">
            <asp:DropDownList ID="DropDownList1" runat="server">
                <asp:ListItem>Seconds</asp:ListItem>
                <asp:ListItem>Minutes</asp:ListItem>
                <asp:ListItem>Hours</asp:ListItem>
            </asp:DropDownList>
        </td>
    </tr>
    <tr>
        <td style="width: 10%">Severity</td>
        <td style=" height: 60px"" >
            <asp:DropDownList ID="ddl_Severity" runat="server">
                <asp:ListItem Value="1">After</asp:ListItem>
                <asp:ListItem Value="0">Immediately</asp:ListItem>
            </asp:DropDownList>
        </td>
        <td style="">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr style="height:60px">
        <td style="width: 10%">Receipients</td>
        <td colspan="3" style="">
            <asp:TextBox CssClass="inputBoxes" ID="txtBox_Receipients" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr style="height:60px">
        <td style="width: 10%">Subject Title</td>
        <td colspan="3" style="">
            <asp:TextBox CssClass="inputBoxes" ID="txtBox_SubjectTitle" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr style="height:60px">
        <td style="width: 10%">Alert Messsage</td>
        <td colspan="3" style="">
            <asp:TextBox CssClass="inputBoxes" ID="txtBox_AlertMessage" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr style="height:60px">
        <td style="width: 10%; ">Notification Window</td>
        <td style=" ">
            <asp:TextBox CssClass="inputBoxes"  ID="txtBox_NotificationWindow" runat="server"></asp:TextBox>
        </td>
        <td style=" "></td>
        <td style="height: 60px"></td>
    </tr>
    <tr style="height:60px">
        <td style="width: 10%; ">Notification Frequency</td>
        <td style=" ">
            <input id="demo_vertical" type="number"/>
        </td>
        <td style=" "></td>
        <td style="height: 60px"></td>
    </tr>
    <tr style="height:60px">
        <td style="width: 10%">Fields to Display in Details</td>
        <td colspan="3" style="">
            <asp:TextBox CssClass="inputBoxes" ID="txtBox_SubjectTitle3" runat="server"></asp:TextBox>
        </td>
    </tr>
</table>

css很简单就是这个

.inputBoxes {
    width: 100%;
}

为什么会这样？

我计算机上的页面截图

Answer 1

在你的HTML中 警报名称，收据，主题标题，警报消息，要在详细信息中显示的字段文本框占用3列。

通知窗口占用一列，因为您没有设置colspan

你必须添加colspan =＆＃34; 3＆＃34;到你的td of notfication

 <td  colspan="3" style=" ">
        <asp:TextBox CssClass="inputBoxes"  ID="txtBox_NotificationWindow" runat="server"></asp:TextBox>
    </td>

Answer 2

您在以下行中有一个额外的引号（包含 ddl_Severity 控件的单元格定义）。

<td style=" height: 60px"" >

也许删除这个引用，看看是否修复了它。