Change alignment and remove spaces in between tr and td - html

Hi am designing a form where I have a table and inside that table, I have a nested table too.
Let me show you the code,
<table class="quiz-template-table">
<tbody>
<tr>
<td class="title">Header Text</td>
<td class="title-data">
<input type="text" name="name" id="txt01"/>
</td>
</tr>
<tr>
<td>
<table id="tblHeaderPosition">
<tr class="header-position">
<td colspan="2">Specify Position And Styles</td>
</tr>
<tr class="position members">
<td>Position </td>
<td>
<select name="Position">
<option value="Top-Left">Top-Left</option>
<option value="Top-Center">Top-Center</option>
<option value="Top-Right">Top-Right</option>
<option value="Middle-Left">Middle-Left</option>
<option value="Middle-Center">Middle-Center</option>
<option value="Middle-Right">Middle-Right</option>
<option value="Middle-Left">Bottom-Left</option>
<option value="Middle-Center">Bottom-Center</option>
<option value="Middle-Right">Bottom-Right</option>
</select>
</td>
</tr>
<tr class="position members">
<td>Font Name</td>
<td>
<select name="Font">
<option value="1">Font-1</option>
<option value="2">Font-2</option>
<option value="3">Font-3</option>
<option value="4">Font-4</option>
<option value="5">Font-5</option>
</select>
</td>
</tr>
<tr class="position members">
<td>Font Style</td>
<td style="width: 2%">
<select name="Font-Style">
<option value="bold">Bold</option>
<option value="italics">Italics</option>
<option value="italics">Combine</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="title">Sub Header Text</td>
<td class="title-data">
<input type="text" name="name1" id="txt02"/>
</td>
</tr>
<tr>
<td class="title">Subject</td>
<td class="title-data">
<input type="text" name="name1" id="txt03" />
</td>
</tr>
</tbody>
</table>
Now, If I remove the nested table then all the alignment and spacing between <td> s are displaying as expected
let me show you that,
Now If I put the nested table then, there are some spaces are there in between them,
as you could see there are alot of spaces between these <td> s are there and also ,
If you hide the nested table then,
as you could see there are some spaces in between Specify Position and styles and Subheader Text..
What I want to achieve:
Please also note that, I have posted this problem over here.
Please have a look at it and it would be nice If I get any solution regarding this.
Update :
As You could see there is a huge gap between label and textbox
I want to minimize the gap just like this
Thanks and Regards


I'm not very much clear with your question but are looking for something like this:
$('.header-position').click(function () {
if ($(this).hasClass("collapsed")) {
$(this).nextUntil('tr.header-position')
.find('td')
.parent()
.find('td > div')
.slideDown("fast", function () {
var $set = $(this);
$set.replaceWith($set.contents());
});
$(this).removeClass("collapsed");
} else {
$(this).nextUntil('tr.header-position')
.find('td')
.wrapInner('<div style="display: block;" />')
.parent()
.find('td > div')
.slideUp("fast");
$(this).addClass("collapsed");
}
});
table {
border-collapse: collapse;
}
.title{
color: #8f8f8f;
font-size: 10px;
margin: 20px 0 5px;
letter-spacing: .7px;
text-transform: uppercase;
}
.quiz-template-table td {
border: 1px solid #f5f5f5;
padding: 10px;
vertical-align: top;
}
.header-position {
font-size: 25px;
font-family: cursive;
background-color: lightgray;
cursor: pointer;
}
.members {
font-family: helvetica;
}
tr.header-position.collapsed ~ .members > td {
padding: 0;
border: 0;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<table class="quiz-template-table">
<tbody>
<tr>
<td class="title">Header Text</td>
<td class="title-data">
<input type="text" name="name" id="txt01"/>
</td>
</tr>
<tr>
<td colspan="2">
<table id="tblHeaderPosition">
<tr class="header-position">
<td colspan="2">Specify Position And Styles</td>
</tr>
<tr class="position members">
<td>Position </td>
<td>
<select name="Position">
<option value="Top-Left">Top-Left</option>
<option value="Top-Center">Top-Center</option>
<option value="Top-Right">Top-Right</option>
<option value="Middle-Left">Middle-Left</option>
<option value="Middle-Center">Middle-Center</option>
<option value="Middle-Right">Middle-Right</option>
<option value="Middle-Left">Bottom-Left</option>
<option value="Middle-Center">Bottom-Center</option>
<option value="Middle-Right">Bottom-Right</option>
</select>
</td>
</tr>
<tr class="position members">
<td>Font Name</td>
<td>
<select name="Font">
<option value="Top-Left">Top-Left</option>
<option value="Top-Center">Top-Center</option>
<option value="Top-Right">Top-Right</option>
<option value="Middle-Left">Middle-Left</option>
<option value="Middle-Center">Middle-Center</option>
<option value="Middle-Right">Middle-Right</option>
<option value="Middle-Left">Bottom-Left</option>
<option value="Middle-Center">Bottom-Center</option>
<option value="Middle-Right">Bottom-Right</option>
</select>
</td>
</tr>
<tr class="position members">
<td>Font Style</td>
<td style="width: 2%">
<select name="Font-Style">
<option value="bold">Bold</option>
<option value="italics">Italics</option>
<option value="italics">Combine</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="title">Sub Header Text</td>
<td class="title-data">
<input type="text" name="name1" id="txt02"/>
</td>
</tr>
<tr>
<td class="title">Subject</td>
<td class="title-data">
<input type="text" name="name1" id="txt03" />
</td>
</tr>
</tbody>
</table>


Try this:
<td colspan="2">
<table id="tblHeaderPosition" >
<tr class="header-position"></tr></table></td>
Where you are starting new table there in the td tag, add colspan=2.


You can achieve this using css. Please review my code carefully.
I'm just added this css
tr.header-position.collapsed ~ .members > td {padding: 0; border: 0;}
When your collapsed is open then we need to hide padding and border. Let me know if you have further clarification.
$('.header-position').click(function () {
if ($(this).hasClass("collapsed")) {
$(this).nextUntil('tr.header-position')
.find('td')
.parent()
.find('td > div')
.slideDown("fast", function () {
var $set = $(this);
$set.replaceWith($set.contents());
});
$(this).removeClass("collapsed");
} else {
$(this).nextUntil('tr.header-position')
.find('td')
.wrapInner('<div style="display: block;" />')
.parent()
.find('td > div')
.slideUp("fast");
$(this).addClass("collapsed");
}
});
.title{
color: #8f8f8f;
font-size: 10px;
margin: 20px 0 5px;
letter-spacing: .7px;
text-transform: uppercase;
}
.quiz-template-table td {
border: 1px solid #f5f5f5;
padding: 10px;
vertical-align: top;
}
.header-position {
font-size: 25px;
font-family: cursive;
background-color: lightgray;
cursor: pointer;
}
.members {
font-family: helvetica;
}
tr.header-position.collapsed ~ .members > td {
padding: 0;
border: 0;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<table class="quiz-template-table">
<tbody>
<tr>
<td class="title">Header Text</td>
<td class="title-data">
<input type="text" name="name" id="txt01"/>
</td>
</tr>
<tr>
<td>
<table id="tblHeaderPosition">
<tr class="header-position">
<td colspan="2">Specify Position And Styles</td>
</tr>
<tr class="position members">
<td>Position </td>
<td>
<select name="Position">
<option value="Top-Left">Top-Left</option>
<option value="Top-Center">Top-Center</option>
<option value="Top-Right">Top-Right</option>
<option value="Middle-Left">Middle-Left</option>
<option value="Middle-Center">Middle-Center</option>
<option value="Middle-Right">Middle-Right</option>
<option value="Middle-Left">Bottom-Left</option>
<option value="Middle-Center">Bottom-Center</option>
<option value="Middle-Right">Bottom-Right</option>
</select>
</td>
</tr>
<tr class="position members">
<td>Font Name</td>
<td>
<select name="Font">
<option value="Top-Left">Top-Left</option>
<option value="Top-Center">Top-Center</option>
<option value="Top-Right">Top-Right</option>
<option value="Middle-Left">Middle-Left</option>
<option value="Middle-Center">Middle-Center</option>
<option value="Middle-Right">Middle-Right</option>
<option value="Middle-Left">Bottom-Left</option>
<option value="Middle-Center">Bottom-Center</option>
<option value="Middle-Right">Bottom-Right</option>
</select>
</td>
</tr>
<tr class="position members">
<td>Font Style</td>
<td style="width: 2%">
<select name="Font-Style">
<option value="bold">Bold</option>
<option value="italics">Italics</option>
<option value="italics">Combine</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="title">Sub Header Text</td>
<td class="title-data">
<input type="text" name="name1" id="txt02"/>
</td>
</tr>
<tr>
<td class="title">Subject</td>
<td class="title-data">
<input type="text" name="name1" id="txt03" />
</td>
</tr>
</tbody>
</table>

Related

How do I make the div inline with td in table?

I've got a table and I've put a div inside it but now it's not in line with the td. I've put display inline block on both the td and div but the td only moved up a little bit. But it needs to be inline with the box. How can I fix this??
Here is my HTML code for the table :
#box4 {
height: 200px;
width: 300px;
background-color: #f2f2f2;
}
th,
td {
padding: 15px;
}
<table style="margin-left:5%;margin-bottom: 10%;">
<tr>
<td>
<h3>Name:</h3>
</td>
<td>Here will be the name of the course.</td>
</tr>
<tr>
<td>
<h3>Description:</h3>
</td>
<td>Here will be the description of the course.</td>
</tr>
<tr>
<td>
<h3>Chapters:</h3>
</td>
<td>
<select name="cars" id="cars">
<option value="volvo">Chapter 1</option>
<option value="saab">Chapter 2</option>
<option value="mercedes">Chapter 3</option>
<option value="audi">Chapter 4</option>
</select>
</td>
</tr>
<tr>
<td style="display: inline-block; position: relative;top:-20%">
<h3>Video:</h3>
</td>
<td>
<div style="display: inline-block;" id="box4"></div>
</td>
</tr>
<tr>
<td>
<h3>Quiz:</h3>
</td>
<td><button>Do quiz</button></td>
</tr>
<tr>
<td>
<h3>Course trial:</h3>
</td>
<td><button>Start trial</button></td>
</tr>
<tr>
<td></td>
<td><button>Community</button></td>
</tr>
</table>
Here is what it looks like

your H3 elements naturally have padding and are pushing them down.
add
h3 {
padding: 0;
}

Try this, a little code added in the CSS file and define a class in the h3 tag
#box4 {
height: 200px;
width: 300px;
background-color: #f2f2f2;
}
.td-video {
margin-top: -5px;
}
th,
td {
padding: 15px;
}
<table style="margin-left:5%;margin-bottom: 10%;">
<tr>
<td>
<h3>Name:</h3>
</td>
<td>Here will be the name of the course.</td>
</tr>
<tr>
<td>
<h3>Description:</h3>
</td>
<td>Here will be the description of the course.</td>
</tr>
<tr>
<td>
<h3>Chapters:</h3>
</td>
<td>
<select name="cars" id="cars">
<option value="volvo">Chapter 1</option>
<option value="saab">Chapter 2</option>
<option value="mercedes">Chapter 3</option>
<option value="audi">Chapter 4</option>
</select>
</td>
</tr>
<tr>
<td style="display: inline-block; position: relative;">
<h3 class="td-video">Video:</h3>
</td>
<td>
<div style="display: inline-block;" id="box4"></div>
</td>
</tr>
<tr>
<td>
<h3>Quiz:</h3>
</td>
<td><button>Do quiz</button></td>
</tr>
<tr>
<td>
<h3>Course trial:</h3>
</td>
<td><button>Start trial</button></td>
</tr>
<tr>
<td></td>
<td><button>Community</button></td>
</tr>
</table>

Change in line css stlye from top: 19% to margin-top: -19px.
#box4 {
height: 200px;
width: 300px;
background-color: #f2f2f2;
}
th,
td {
padding: 15px;
}
<table style="margin-left:5%;margin-bottom: 10%;">
<tr>
<td>
<h3>Name:</h3>
</td>
<td>Here will be the name of the course.</td>
</tr>
<tr>
<td>
<h3>Description:</h3>
</td>
<td>Here will be the description of the course.</td>
</tr>
<tr>
<td>
<h3>Chapters:</h3>
</td>
<td>
<select name="cars" id="cars">
<option value="volvo">Chapter 1</option>
<option value="saab">Chapter 2</option>
<option value="mercedes">Chapter 3</option>
<option value="audi">Chapter 4</option>
</select>
</td>
</tr>
<tr>
<td style="display: inline-block; position: relative;margin-top:-20px">
<h3>Video:</h3>
</td>
<td>
<div style="display: inline-block;" id="box4"></div>
</td>
</tr>
<tr>
<td>
<h3>Quiz:</h3>
</td>
<td><button>Do quiz</button></td>
</tr>
<tr>
<td>
<h3>Course trial:</h3>
</td>
<td><button>Start trial</button></td>
</tr>
<tr>
<td></td>
<td><button>Community</button></td>
</tr>
</table>

Align 2 tables horizontally HTML

i am trying to align my tables horizontally. i put them into a same div like so. i also tried to use: inline-block for each table but its does not work. The "colours" table always stay at the bottom and not on the same line as the "parts" table
<div id="tables">
<table class="parts">
<caption>CUSTOMISABLE PARTS</caption>
<tr>
<td>
<label>Frame Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">46cm 5'1" - 5'5"</option>
<option value="2">49cm 5'3" - 5'8"</option>
<option value="3">50cm 5'4" - 5'8"</option>
<option value="4">54cm 5'8" - 5'11"</option>
<option value="5">58cm 5'10" - 6'2"</option>
<option value="6">59cm 5'11" - 6'2"</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Battery Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Large battery</option>
<option value="2">Medium battery</option>
<option value="3">Large battery</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Speed Type:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Fix Cog</option>
<option value="2">Changable Cog</option>
<option value="3">Freewheel</option>
<option value="3">8-Speed</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Seats Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Small</option>
<option value="2">Medium</option>
<option value="3">Large</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Rear Break:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Rim type:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Standard</option>
<option value="2">Sport</option>
</select>
</div>
</td>
</tr>
</table>
<table class="colours">
<caption>CHOOSE YOUR COLOURS</caption>
<tr>
<td>
<label>Frame:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">46cm 5'1" - 5'5"</option>
<option value="2">49cm 5'3" - 5'8"</option>
<option value="3">50cm 5'4" - 5'8"</option>
<option value="4">54cm 5'8" - 5'11"</option>
<option value="5">58cm 5'10" - 6'2"</option>
<option value="6">59cm 5'11" - 6'2"</option>
</select>
</div>
</td>
</tr>
</table>
But it turned out like this
my CSS code:
.parts {
font-family: arial;
font-size: 20px;
margin-left: 20px;
width: 33.3%;
margin-bottom: 15px;
height: auto;
}
.parts caption {
margin-top: 10px;
font-family: arial;
font-size: 30px;
font-weight: bold;
border: 2px solid black;
padding-left: 4px;
text-align: center;
}
.Options select {
font-size: 15px;
border-color:#999;
float: left;
width: 200px;
}
.colours {
font-family: arial;
font-size: 20px;
margin-left: 36%;
position: relative;
margin-top: 0px;
}

You could use display: inline-table on the two child tables, as shown below.
You need to think about how best to deal with the table captions so get the styling
that you want.
.parts {
font-family: arial;
font-size: 20px;
margin-left: 20px;
width: 33.3%;
margin-bottom: 15px;
height: auto;
}
.parts caption {
margin-top: 10px;
font-family: arial;
font-size: 30px;
font-weight: bold;
border: 2px solid black;
padding-left: 4px;
text-align: center;
}
.Options select {
font-size: 15px;
border-color: #999;
float: left;
width: 200px;
}
.colours {
font-family: arial;
font-size: 20px;
margin-left: 20px; /* adjust as neeeded */
position: relative; /* not needed */
margin-top: 0px;
}
#tables {
border: 1px dotted blue; /* for demo only */
}
#tables table {
display: inline-table;
border: 1px dotted gray;
vertical-align: top; /* you need to decide how best to align the child tables */
}
<div id="tables">
<table class="parts">
<caption>CUSTOMISABLE PARTS</caption>
<tr>
<td>
<label>Frame Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">46cm 5'1" - 5'5"</option>
<option value="2">49cm 5'3" - 5'8"</option>
<option value="3">50cm 5'4" - 5'8"</option>
<option value="4">54cm 5'8" - 5'11"</option>
<option value="5">58cm 5'10" - 6'2"</option>
<option value="6">59cm 5'11" - 6'2"</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Battery Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Large battery</option>
<option value="2">Medium battery</option>
<option value="3">Large battery</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Speed Type:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Fix Cog</option>
<option value="2">Changable Cog</option>
<option value="3">Freewheel</option>
<option value="3">8-Speed</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Seats Size:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Small</option>
<option value="2">Medium</option>
<option value="3">Large</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Rear Break:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
<label>Rim type:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">Standard</option>
<option value="2">Sport</option>
</select>
</div>
</td>
</tr>
</table>
<table class="colours">
<caption>CHOOSE YOUR COLOURS</caption>
<tr>
<td>
<label>Frame:</label>
</td>
<td>
<div class="Options">
<select>
<option value="Please select">Please select</option>
<option value="1">46cm 5'1" - 5'5"</option>
<option value="2">49cm 5'3" - 5'8"</option>
<option value="3">50cm 5'4" - 5'8"</option>
<option value="4">54cm 5'8" - 5'11"</option>
<option value="5">58cm 5'10" - 6'2"</option>
<option value="6">59cm 5'11" - 6'2"</option>
</select>
</div>
</td>
</tr>
</table>
</div>

Centering table within CSS

I am trying to center tables within my form and ran into a stumbling block. I finally have the tables on 1 row, but now need to get them centered without success. I am not sure whether the problem starts with the fact that I have display: none. Please help me with this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="en"/>
<style type="text/css">
table { border: 1px solid white; width: 100%; }
#tabler1
{
border: 1px solid cyan;
width: 30%;
float: left;
}
#tabler2
{
border: 1px solid yellow;
width: 30%;
float: left;
}
#tabler3
{
border: 1px solid blue;
width: 30%;
float: left;
}
</style>
<title>Test Page</title>
</head>
<body>
<form method="POST" action="--WEBBOT-SELF--">
<table border="1" width="100%" bordercolor="#008000" id="table1">
<tr>
<td>
<input type=button VALUE="ADVANCED SEARCH">
</td>
</tr>
<tr>
<td id="tabler1">
<table width="100%" name="police_response1" >
<tr>
<th colspan="2">Table1</th>
</tr>
<td>&nbspFIELD TEXT11</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
<tr>
<td>&nbspFIELD TEXT12</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td>&nbspFIELD TEXT13</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
</table>
</td>
<td id="tabler2">
<table width="100%" name="police_response1" >
<tr>
<th colspan="2">Table2</th>
</tr>
<td>&nbspFIELD TEXT21</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
<tr>
<td>&nbspFIELD TEXT22</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td>&nbspFIELD TEXT23</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
</table>
</td>
<td id="tabler3">
<table width="100%" name="police_response1" >
<tr>
<th colspan="2">Table3</th>
</tr>
<td>&nbspFIELD TEXT31</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
<tr>
<td>&nbspFIELD TEXT32</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td>&nbspFIELD TEXT33</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="clear:both;"></div>
</form>
</body></html>
http://jsfiddle.net/pepelepe/CyqBn/5/

Depends on what you really want to get centered.
You can center content of those 3 tables with adding text-align: center; into the table in css style like this:
table {
border: 1px solid white;
width: 100%;
text-align: center;
}
This will center everything inside every of those 3 tables.
Or you can center the whole form - for example put <div class="master"> just after <body> tag and </div> after the </form> tag. Then into your stylesheet put this:
.master {
margin: 0px auto;
}
This should center the form itself in the document.

Problems displaying two tables in a div in IE

I'm trying to display two tables inside a container div and it works perfectly in Firefox, and does exactly what I am expecting, but in IE it shifts my second table to appear outside my div. Anyone got any ideas what the issue is that I am running into here? If I put either table in by itself there is no problem, but when I add the second table, regardless of which one come first, I get the problem.
Code for tables:
<div id="contentContainer" style="border: 1px solid black;">
<table id="filterPostingsTable" align="Left" border="0" style="width:100%;">
<tr>
<th>Status</th>
<th>PositionTitle</th>
<th>Classification</th>
<th>Location</th>
<th>Filter</th>
</tr>
<tr>
<td align="center">
<select name="filterStatus" id="filterStatus">
<option selected="selected" value="">Select Status</option>
<option value="Active">Active</option>
<option value="Interviewing">Interviewing</option>
<option value="New">New</option>
</select>
</td>
<td align="center">
<input name="filterPositionTitle" type="text" id="filterPositionTitle" />
</td>
<td align="center">
<select name="922e5a87-18fd-467f-9e7b-f4210fbd93ea" id="922e5a87-18fd-467f-9e7b-f4210fbd93ea">
<option value="0">Select One...</option>
<option value="9c2e6df7-e319-478c-b137-47eff4e4748d">Administrative</option>
<option value="78ce598b-6dad-4434-9bb5-24429c630943">Certified</option>
<option value="c75f18a4-e503-428c-8e23-83d1dac21997">Classified</option>
<option value="77232a27-2c58-4192-bbbf-1b0b493da564">Other</option>
</select>
</td>
<td align="center">
<select name="filterLocation" id="filterLocation">
<option value="Select Location">Select Location</option>
<option value="77c68429-e878-4778-b467-0d684308b188">Desert Foothills</option>
<option value="d226f2a3-02c4-40c5-b784-949c22647081">District Office</option>
</select>
</td>
<td align="center">
<input type="submit" name="filterJobs" value="Filter Postings" id="filterJobs" />
</td>
</tr>
</table>
<table id="jobPostingsTable" class="tablesorter" align="Left" border="0" style="width:100%;float: left">
<thead>
<tr>
<th></th>
<th>Status</th>
<th>Position Title</th>
<th>Classification</th>
<th>Working Location</th>
</tr>
</thead>
<tbody>
<tr id="2a62a993-fc3a-4a43-96b6-fd663a724b6e">
<td>
<input id="apply2a62a993-fc3a-4a43-96b6-fd663a724b6e" type="checkbox" name="apply2a62a993-fc3a-4a43-96b6-fd663a724b6e" />
</td>
<td>New</td>
<td valign="middle">
<span>Systems Analyst</span>
<img src="images/pdf.png" style="border-width:0px;" />
</td>
<td>Classified</td>
<td>District Office</td>
</tr>
</tbody>
</table>
</div>
Applicable CSS is as follows:
#contentContainer {
background-color:#FFFFFF;
border:1px solid #000000;
float:left;
height:auto;
margin:0;
width:1000px;
}
All tables are set to width of 100%. The buttons in the image don't really matter as they don't seem to affect the table problem whether they are there or not. Usually this sort of thing works just fine, but in IE 7 it is now rendering as follows:

If you want to float your tables, they will need a width in pixels, not percent.

How to have data align to top of html table row

I have this html table where I have one cell in the table with rowSpan = 3. so in the first column, I have 3 rows with inputs and in the second column I have a picture showing to span all 3 columns. I am trying to figure out how the browser figured out how to vertically allocate spacing for each of the rows in the first column.
I want then to be "tight" so all the empty space (if the picture is big, goes to the bottom).
But it seems like the empty space is being allocated across each row equally.
Is there anyway to change this behavior . .
Here is the table:
<table class="input" border="1">
<tbody>
<tr>
<td valign="top">G:</td>
<td valign="top">
<select id="GId" maxlength="50" name="GId">
<option></option>
<option value="2">Joe</option>
<option selected="selected" value="3">Bill</option>
</select>
</td>
<td id="imageBorder" rowspan="3" align="center">
<img class="my_img" src="http://www.example.com/image.png">
</td>
</tr>
<tr>
<td valign="top">Type:</td>
<td valign="top">
<select id="EId" maxlength="50" name="EId">
<option></option>
<option value="10"></option>
<option selected="selected" value="2">A</option>
<option value="4">C</option>
</select>
</td>
</tr>
<tr>
<td valign="top">Manager:</td>
<td valign="top">
<select id="ManagerPersonId" maxlength="50" name="ManagerPersonId">
<option></option>
<option value="204">A</option>
<option value="183">B</option>
</select>
</td>
</tr>
<tr>
<td valign="top">PictureL:</td>
<td colspan="2" valign="top">
<input id="PictureLink" maxlength="200" name="PictureLink" size="60" value="http://www.example.com/image.png" type="text">
</td>
</tr>
</tbody>
</table>

I think you want to have the first 2 rows at minimum height and if the picture is big, all the space to go on the third line. If this is the case, then put a height to the first 2 lines, something like this:
<table class="input" border="1">
<tbody>
<tr>
<td valign="top" height="1">G:</td>
<td valign="top">
<select id="GId" maxlength="50" name="GId">
<option value="2">Joe</option>
<option selected="selected" value="3">Bill</option>
</select>
</td>
<td id="imageBorder" rowspan="3" align="center"><img class="my_img" src="http://www.mysite.com/image.png"> </td>
</tr>
<tr>
<td valign="top" height="1">Type:</td>
<td valign="top">
<select id="EId" maxlength="50" name="EId">
<option value="10"></option>
<option selected="selected" value="2">A</option>
<option value="4">C</option>
</select>
</td>
</tr>
<tr>
<td valign="top">Manager:</td>
<td valign="top">
<select id="ManagerPersonId" maxlength="50" name="ManagerPersonId">
<option value="204">A</option>
<option value="183">B</option>
</select>
</td>
</tr>
<tr>
<td valign="top">PictureL:</td>
<td colspan="2" valign="top"><input id="PictureLink" maxlength="200" name="PictureLink" size="60" value="http://www.mysite.com/image.png" type="text">
</td>
</tr>
</tbody>
</table>

style the td as below to have control on the data alignment.
<table>
<tr>
<td style = "height:300;width:375;vertical-align:top;"> abc </td>
</tr>
</table>

use
<tr valign="top">...</tr>
also your html looks incomplete.
UPDATE
add style="height:100%;" on the first 2 rows so the entire extra height is transferred to the 3rd row.
<table class="input" border="1">
<tbody>
<tr style="height: 100%;">
<td valign="top">G:</td>
<td valign="top"><select id="GId" maxlength="50" name="GId">
<option></option>
<option value="2">Joe</option>
<option selected="selected" value="3">Bill</option>
</select></td>
<td id="imageBorder" rowspan="3" align="center"><img class="my_img" src="http://www.google.co.in/logos/2010/flintstones10-hp.jpg"></td>
</tr>
<tr style="height: 100%;">
<td valign="top">Type:</td>
<td valign="top"><select id="EId" maxlength="50" name="EId">
<option></option>
<option value="10"></option>
<option selected="selected" value="2">A</option>
<option value="4">C</option>
</select></td>
</tr>
<tr>
<td valign="top">Manager:</td>
<td valign="top"><select name="ManagerPersonId" maxlength="50" id="ManagerPersonId">
<option></option>
<option value="204">A</option>
<option value="183">B</option>
</select></td>
</tr>
<tr>
<td valign="top">PictureL:</td>
<td colspan="2" valign="top"><input value="http://www.mysite.com/image.png" size="60" name="PictureLink" maxlength="200" id="PictureLink" type="text"></td>
</tr>
</tbody>
</table>

You can set a fixed height for each row but the last one.
<tr style="height: 20px">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 20px">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
This way all the extra space will go to the last row.