The bottom border is only till the end of textboxes. I am working in visual studio 2010. The same code works fine in another PC. Why
<div style="clear: both; max-width: 2400px">
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="40%">
</td>
</tr>
<tr>
<td>
AGE
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
</tr>
</table>
</div>
You are missing third TD in second row. Insert it and it will show up.
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="40%">
</td>
</tr>
<tr>
<td>
AGE
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
<td>
</td>
</tr>
</table>
You missed the third td in second tr
<div style="clear: both; max-width: 2400px">
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="40%">
</td>
</tr>
<tr>
<td>
AGE
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
<td>
</td>
</tr>
</table>
</div>
You are indeed missing the third <td></td> or you can colspan= "2" one of the others
you missed the third td ,if you want to only have two td in second tr,use colspan="2" in that td tag :
<div style="clear: both; max-width: 2400px">
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
<td width="40%">
</td>
</tr>
<tr>
<td>
AGE
</td>
<td colspan="2">
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
</tr>
</table>
</div>
Try this code...
<div style="clear: both; max-width: 2400px">
<table style="border: 1px solid gray" width="100%">
<tr>
<td width="20%">
NAME
</td>
<td width="40%">
<asp:TextBox ID="TextBox1" runat="server" Width="98%"></asp:TextBox>
</td>
</tr>
<tr>
<td>
AGE
</td>
<td width="40%">
<asp:TextBox ID="TextBox2" runat="server" Width="98%"></asp:TextBox>
</td>
</tr>
</table>
</div>
</div>
Related
I'm trying to do a nested-table I'm about to be finish on my first table
when this happen:
here Is my HTML markup:
<table class="quotationTable1">
<%--Primary table--%>
<tr>
<td>
<table>
<%--Second Table--%>
<tr>
<td style="width: 397px">
<table style="border-style: solid; border-color: inherit; border-width: medium; width: 452px;">
<%--Third Table--%>
<tr>
<th colspan="2" style="padding-top: 5px; background-color: black; color: white;">Job Quotation</th>
</tr>
<tr>
<td colspan="2" style="height: 26px;">
<asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 265px">
<asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 202px">
<asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" style="height: 3px">
<asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" style="height: 59px">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label></td>
</tr>
</table>
</td>
<td>
<table style="width: 373px; position:relative;"><%--fourth table--%>
<tr>
<th colspan="3" style="padding-bottom:5px; background-color: black; color: white; width: 400px;">Specification</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
How can I make my second table Specification remove all those spaces and
be on the same position as Job Quotation?
you need to add vertical-align:top to td
and don't use inline styles, use classes instead
td {
vertical-align: top
}
.w400 {
padding-bottom: 5px;
background-color: black;
color: white;
width: 400px
}
.w397 {
width: 397px
}
.w397 table {
border-style: solid;
border-color: inherit;
border-width: medium;
width: 452px
}
.w397.title {
padding-top: 5px;
background-color: black;
color: white;
}
.w373.relative {
width: 373px;
position: relative
}
.h59 {
height: 59px
}
.h26 {
height: 26px
}
.h3 {
height: 3px
}
<table class="quotationTable1">
<tr>
<td>
<table>
<tr>
<td class="w397">
<table class="w397 table">
<tr>
<th colspan="2" class="w397 title">Job Quotation</th>
</tr>
<tr>
<td colspan="2" class="w397 h26">
<asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="w265">
<asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td class="w202">
<asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" class="h3">
<asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" class="h59">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label>
</td>
</tr>
</table>
</td>
<td>
<table class="w373 relative">
<tr>
<th colspan="3" class="w400">Specification</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
You need to nest the table in a TR and TD within the parent table:
<table class="quotationTable1">
<%--Primary table--%>
<tr>
<td>
<table>
<%--Second Table--%>
<tr>
<td style="width: 397px">
<table style="border-style: solid; border-color: inherit; border-width: medium; width: 452px;">
<%--Third Table--%>
<tr>
<th colspan="2" style="padding-top: 5px; background-color: black; color: white;">Job Quotation</th>
</tr>
<tr>
<td colspan="2" style="height: 26px;">
<asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 265px">
<asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 202px">
<asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
<asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" style="height: 3px">
<asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<table style="width: 373px; position:relative;"><%--fourth table--%>
<tr>
<th colspan="3" style="padding-bottom:5px; background-color: black; color: white; width: 400px;">Specification</th>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="height: 59px">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
I'm trying to copy this table format.
but I can't seem to make
uneven column width for each td and it break the form of my table as well
here is my code:
<div class="CenterThings">
<table class="CenterThings">
<tr>
<th colspan="3" style="background-color:black;color:white;">Job Quotation</th>
</tr>
<tr>
<td style="width: 328px">Address:<asp:TextBox ID="TextBox2" runat="server" Height="16px" Width="255px"></asp:TextBox>
</td>
<td style="width: 219px">Contact#:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 328px">
Job Description:
<asp:TextBox ID="TextBox3" runat="server" Width="194px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 328px">
Printing Process:
<asp:TextBox ID="TextBox4" runat="server" Height="16px" Width="195px"></asp:TextBox>
</td>
</tr>
<tr>
<th colspan="3" style="background-color:black;color:white;">Specification</th>
</tr>
<tr>
<td style="width: 328px">
Quantity:
</td>
<td style="width: 219px">
Size:
</td>
<td>
No.of pages inside:
</td>
</tr>
<tr>
<td style="width: 328px">
Material:
</td>
<td style="width: 219px">
Cover:
</td>
<td>
Inside:
</td>
</tr>
</table>
</div>
and this is its output :
I needed to somehow replicate the first picture or somehow close.
You could use nested tables, placing a whole table inside a TD. This would allow the extra complexity in your layout.
<table id='main_table'>
<tr>
<td>
<table id='inner_table'>
</table>
</td>
</tr>
</table>
Please guide. Image is attached.
I want make proper alignment for all rows and columns. I used this code to make this table. How to align and add fourth column in Deduction Mode row so that table rows and columns become align. Thank you.
<table width="100%" class="generalTable">
<tr>
<th colspan="3" class="clspopupheading"> Approval
</th>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td style="width: 110px;">
<span class="mendatory">*</span>Employee ID:
</td>
<td colspan="2">
<input type="text" id='txtEmployeeID' runat="server" class="clsTxtDepartmentName" readonly="readonly"/>
<asp:RequiredFieldValidator ID="rfvDepartmentName" runat="server" ValidationGroup="Department"
ErrorMessage="*" Display="Dynamic" ControlToValidate="txtEmployeeID" CssClass="rfvDepartmentName">
</asp:RequiredFieldValidator>
<input type="hidden" id="hfDepartmentId" runat="server" class="hfDepartmentId" />
</td>
</tr>
<tr>
<td >
Approved Amount:
</td>
<td>
<input type="text" id='txtApprovedAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td >
<asp:RadioButton ID="fixedamount" GroupName="DeductionMethod" Text="Fixed Amount" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="percentage" GroupName="DeductionMethod" Text="Percentage" runat="server" />
</td>
</tr>
<tr>
<td >
Deduction Amount/ Percentage:
</td>
<td colspan="3">
<input type="text" id='txtDeductionAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td>
<asp:RadioButton ID="rbtnApproval" GroupName="Approval" Text="Approve" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnPending" GroupName="Approval" Text="Pending" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnReject" GroupName="Approval" Text="Reject" runat="server" />
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="btnSave" Text="Save" runat="server" CssClass="button1 clsBtnSave"
ValidationGroup="Department" OnClick="btnSave_Click" />
<asp:Button ID="btnCancel" Text="Cancel" runat="server"
CssClass="button1 clsCancelButton" onclick="btnCancel_Click"
/>
</td>
</tr>
</table>
You want to throw the multiple choices into a table in one . Also, the colspans weren't quite right. Something like this.
<table width="100%" class="generalTable" border="2">
<tr>
Approval
</th>
</tr>
<tr>
<td colspan="4">
</td>
</tr>
<tr>
<td style="width: 110px;">
<span class="mendatory">*</span>Employee ID:
</td>
<td colspan="3">
<input type="text" id='txtEmployeeID' runat="server" class="clsTxtDepartmentName" readonly="readonly"/>
<asp:RequiredFieldValidator ID="rfvDepartmentName" runat="server" ValidationGroup="Department"
ErrorMessage="*" Display="Dynamic" ControlToValidate="txtEmployeeID" CssClass="rfvDepartmentName">
</asp:RequiredFieldValidator>
<input type="hidden" id="hfDepartmentId" runat="server" class="hfDepartmentId" />
</td>
</tr>
<tr>
<td >
Approved Amount:
</td>
<td colspan = 3>
<input type="text" id='txtApprovedAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td colspan = 3>
<table border="1">
<tr>
<td>
<asp:RadioButton ID="fixedamount" GroupName="DeductionMethod" Text="Fixed Amount" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="percentage" GroupName="DeductionMethod" Text="Percentage" runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td >
Deduction Amount/ Percentage:
</td>
<td colspan="3">
<input type="text" id='txtDeductionAmount' runat="server" class="clsTxtDepartmentName"/>
</td>
</tr>
<tr>
<td >
Deduction Mode:
</td>
<td colspan = 3>
<table border="1">
<tr>
<td>
<asp:RadioButton ID="rbtnApproval" GroupName="Approval" Text="Approve" Checked="true" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnPending" GroupName="Approval" Text="Pending" runat="server" />
</td>
<td>
<asp:RadioButton ID="rbtnReject" GroupName="Approval" Text="Reject" runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4">
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="btnSave" Text="Save" runat="server" CssClass="button1 clsBtnSave"
ValidationGroup="Department" OnClick="btnSave_Click" />
<asp:Button ID="btnCancel" Text="Cancel" runat="server"
CssClass="button1 clsCancelButton" onclick="btnCancel_Click"
/>
</td>
</tr>
</table>
I am weak in CSS, and I am trying to put a table in my html page, it has two rows and five columns per row(of course it is simplified), and it should look like this (the table is a hand-drawing table, it does not come so precise, I`m sorry for that.):
But mine looks like this:
This is my code:
<table border="1">
<tr>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:25px"> </td>
</tr>
<tr>
<td style="width:25px"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
</tr>
</table>
Code in jsfiddle is here.
NOTE:Any styles could be added, but structure of table could not be changed.
My problem is not the border style of table, but the width of cells, it seems that cells has a erratic width, I hope the right-border of first cell in second row could reach to the middle of bottom-border of first cell in first row, and the right-border of first cell in first row could reach to the middle of top-border of second cell in second row, so is others.
I have tried my best, but it still does not work. How could I do to match the requirement? Any suggestion will be appreciated. Thanks in advance.
You can use a <colgroup> element to achieve this:
<table border="1">
<colgroup>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
</colgroup>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
It will tell the table that there are 9 columns and each row will span the columns as you originally had.
There are other non-table ways to acheive what you are looking for. Here is one quick example:
<div>
<div class="row">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div class="row">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
div.row
{
clear:both;
}
div div div
{
width: 50px;
border-width: 1px;
border-style: solid;
border-color: black;
display: inline-block;
float: left;
margin: -1px;
}
div div:nth-child(2n+1) div:first-child,
div div:nth-child(2n) div:last-child
{
width: 25px;
}
Use tables within tables..
<table>
<tr>
<td>
<table border="1">
<tr>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:25px"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td style="width:25px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
</tr>
</table>
</td>
</tr>
</table>
This way you will never have that problem...
For this to work, you need to have at least one row that defines the width of individual cells (ones that are not using cellspans):
http://jsfiddle.net/cR2qd/7/1
HTML:
<body>
<table border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
</body>
CSS:
td {
width: 25px;
}
What's wrong?
<table id="PollDetails" runat="server" Visible="false">
<tbody>
<tr>
<td align="right">
Poll Question:
</td>
<td align="left">
<asp:TextBox ID="txtQuestion" runat="server" Width="300"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" runat="server" id="lblSelection1" visible="true">
Selection 1:
</td>
<td align="left">
<asp:TextBox ID="txtSelection1" runat="server" Width="300" Visible="false"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" runat="server" id="lblSelection2" visible="true">
Selection 2:
</td>
<td align="left">
<asp:TextBox ID="txtSelection2" runat="server" Width="300" Visible="false"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" runat="server" id="lblSelection3" visible="true">
Selection 3:
</td>
<td align="left">
<asp:TextBox ID="txtSelection3" runat="server" Width="300" Visible="false"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" runat="server" id="lblSelection4" visible="true">
Selection 4:
</td>
<td align="left">
<asp:TextBox ID="txtSelection4" runat="server" Width="300" Visible="false"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" runat="server" id="lblSelection5" visible="true">
Selection 5:
</td>
<td align="left">
<asp:TextBox ID="txtSelection5" runat="server" Width="300" Visible="false"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save Changes" CausesValidation="False" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="False" />
</td>
</tr>
</tbody>
</table>
Generated Code pasted:
<div>
<table id="ctl00_ContentPage_PollManagement_PollDetails">
<tr>
<td align="right">
Poll Question:
</td>
<td align="left">
<input name="ctl00$ContentPage$PollManagement$txtQuestion" type="text" value="How much time do you spend on a computer daily?" id="ctl00_ContentPage_PollManagement_txtQuestion" style="width:300px;" />
</td>
</tr>
<tr>
<td id="ctl00_ContentPage_PollManagement_lblSelection1" align="right">Selection 1:
</td>
<td align="left">
<input name="ctl00$ContentPage$PollManagement$txtSelection1" type="text" value="Less than 1 Hour" id="ctl00_ContentPage_PollManagement_txtSelection1" style="width:300px;" />
</td>
</tr>
<tr>
<td id="ctl00_ContentPage_PollManagement_lblSelection2" align="right">Selection 2:
</td>
<td align="left">
<input name="ctl00$ContentPage$PollManagement$txtSelection2" type="text" value="Between 1 and 2 Hours " id="ctl00_ContentPage_PollManagement_txtSelection2" style="width:300px;" />
</td>
</tr>
<tr>
<td id="ctl00_ContentPage_PollManagement_lblSelection3" align="right">Selection 3:
</td>
<td align="left">
<input name="ctl00$ContentPage$PollManagement$txtSelection3" type="text" value="Between 2 and 4 Hours " id="ctl00_ContentPage_PollManagement_txtSelection3" style="width:300px;" />
</td>
</tr>
<tr>
<td id="ctl00_ContentPage_PollManagement_lblSelection4" align="right">Selection 4:
</td>
<td align="left">
<input name="ctl00$ContentPage$PollManagement$txtSelection4" type="text" value="Between 4 and 8 Hours " id="ctl00_ContentPage_PollManagement_txtSelection4" style="width:300px;" />
</td>
</tr>
<tr>
<td id="ctl00_ContentPage_PollManagement_lblSelection5" align="right">Selection 5:
</td>
<td align="left">
<input name="ctl00$ContentPage$PollManagement$txtSelection5" type="text" value="Between 8 and 16 Hours" id="ctl00_ContentPage_PollManagement_txtSelection5" style="width:300px;" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="ctl00$ContentPage$PollManagement$btnSave" value="Save Changes" id="ctl00_ContentPage_PollManagement_btnSave" />
<input type="submit" name="ctl00$ContentPage$PollManagement$btnCancel" value="Cancel" id="ctl00_ContentPage_PollManagement_btnCancel" />
</td>
</tr>
The table, as posted, shows up properly on the IE7 so it has to be because of surrounding HTML markup in your page.
What DOCTYPE are you using? IE could be interpreting the page differently than Firefox depending on your DOCTYPE.
If you're unfamiliar with DOCTYPES, A List Apart has a good description of them.
Removing all of the [visible ="false"] and completing the closing table table tag delivers the desired output. Start from there.
What is visible and what is not?
Changing all your visibile=false to true it looks fine in ie7.
Try putting a & nbsp; inside the blank TD tag near the bottom.