colspan screwing up css asp.net table

Question

I created a table to organize my items on a page. The page is an edit page for a property. I used colspan to expand rows and put a textbox within rows and set the textbox wdith to 100%, However, the textbox width still only takes the space of 1 column not 3 columns like I expected here is the code

 <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 is simple just this

.inputBoxes {
    width: 100%;
}

why is this?

a screenshot of my page on my computer enter image description here

Please could you create a JS fiddle demonstrating the problem and/or the generated html. — Hidden Hobbes, Sep 05 '14 at 20:46
Your very first statement `I created a table to organize my items on a page.` is already not recommended... http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — LcSalazar, Sep 05 '14 at 20:51
strange it works in JS fiddle this link when I paste in the direct html generated however it doesn't work when I compile and run I have the website posted here http://testingnan.azurewebsites.net/editcontent however if I test it in js fiddle using t he code from view source at the webpage and add in the css at this link IT WORKS WHYYY???????????? JS fiddle link http://jsfiddle.net/tw02j22t/ — nanobots, Sep 05 '14 at 20:53
Does the CSS class `FormFormatTable` contain anything that manipulates the rows and columns? — j.f., Sep 05 '14 at 20:56
no I deleted that css already but why does it renders different from JS fiddle and the actual page? — nanobots, Sep 05 '14 at 20:59

score 2 · Accepted Answer · answered Sep 05 '14 at 20:56

2

In you HTML the Alert Name , Receipients ,Subject Title ,Alert Messsage ,Fields to Display in Details TextBoxs take 3 columns .

Notification Window take one columns because you don't set colspan

enter image description here

you must add colspan="3" to your td of notfication

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

answered Sep 05 '14 at 20:56

Duha

811
1
12
26

problem is not notification window is the fact on my computer the VERY first row alert name takes the same width as notification window I don't know why it is doing that – nanobots Sep 05 '14 at 20:57
notification window only take that long is intended – nanobots Sep 05 '14 at 20:57
be sure your browser not cache old html , delete history or press ctrl+f5 to reload your page – Duha Sep 05 '14 at 21:00
and what is the class="FormFormatTable" – Duha Sep 05 '14 at 21:01
sorry about that I deleted that css already because I feared it could meddle with my css so it is no longer present so it is not doing anything – nanobots Sep 05 '14 at 21:03
I updated my screenshot on my screen and uploaded it onto the question seems different with yours and I just refreshed my cache so I don't know why it is doing this – nanobots Sep 05 '14 at 21:04
what browser you use? try to open your html page in different browser – Duha Sep 05 '14 at 21:04
I am using latest version of chrome – nanobots Sep 05 '14 at 21:06
no IE is doing the same thing whyy???? what am I forgetting or what is causing this ?? because it is acting as if it is not reading the css at all just reading the page itself. that is what I noticed and I inspect element on the table and it showed clearly that the css is been applied expect it is not – nanobots Sep 05 '14 at 21:08
mmmm , how you add the css on your page you must add on header like this – Duha Sep 05 '14 at 21:12
let me try add this in manually on the asp.net page itself instead of css – nanobots Sep 05 '14 at 21:14
nope still doesn't work I am very frustrated because this seem really straight forward and IT WORKS ON JS FIDDLE!!! but not in the actual page :( – nanobots Sep 05 '14 at 21:17
to test if style is applyed try to add color like this – Duha Sep 05 '14 at 21:17
And be sure you don't disable CSS in browser , and sure there no code ( javascript or vb code ) that change styles – Duha Sep 05 '14 at 21:24

score 0 · Answer 2 · edited Jan 28 '16 at 20:07

0

You have an extra quote in the following line (the cell definition that contains your ddl_Severity control).

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

Maybe remove this quote, and see if that fixes it.

edited Jan 28 '16 at 20:07

Hussein El Feky

6,627
5
44
57

answered Jan 28 '16 at 19:46

Stinky Buffalo

167
1
3

colspan screwing up css asp.net table

2 Answers2