colspan 搞砸了 css asp.net 表答案

【问题标题】：colspan screwing up css asp.net tablecolspan 搞砸了 css asp.net 表
【发布时间】：2014-10-30 20:47:13
【问题描述】：

我创建了一个表格来组织页面上的项目。该页面是属性的编辑页面。我使用 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%;
}

这是为什么？

我在电脑上的页面截图

【问题讨论】：

请您创建一个 JS 小提琴来演示问题和/或生成的 html。
你的第一个声明I created a table to organize my items on a page.已经不推荐了...stackoverflow.com/questions/83073/…
奇怪，当我粘贴到生成的直接 html 时，它在 JS 中起作用，但是当我编译和运行时它不起作用我在这里发布了网站 testingnan.azurewebsites.net/editcontent 但是如果我在js小提琴使用网页上查看源代码中的代码并在此链接中添加css IT WORKS WHYYY???????????? JS小提琴链接jsfiddle.net/tw02j22t
CSS 类FormFormatTable 是否包含任何操作行和列的内容？
不，我已经删除了那个 css，但是为什么它的呈现与 JS fiddle 和实际页面不同？

标签： c# html css asp.net html-table

【解决方案1】：

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

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

您必须将 colspan="3" 添加到您的通知 td

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

【讨论】：

问题不是通知窗口是事实在我的计算机上，第一行警报名称与通知窗口的宽度相同我不知道为什么会这样
通知窗口只需要这么长的时间
确保您的浏览器没有缓存旧的 html ，删除历史记录或按 ctrl+f5 重新加载您的页面
什么是 class="FormFormatTable"
很抱歉，我已经删除了那个 css，因为我担心它会干扰我的 css，所以它不再存在，所以它什么也没做

【解决方案2】：

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

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

也许删除这个引用，看看是否能解决它。

【讨论】：