I have two row, there are some things in 1st row that decide the row's width;
On the second row I have couple of groups of elements which intended to contain two elements side by side.
I want to make even spaces between these groups of elements in 2nd row. They should stretch all over the cell and take all it's width.
Could you advice, what would I do?
The code goes like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<table border="1">
<tr>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
</tr>
<tr>
<td colspan="5" align="justify">
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
<!-- group2 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
<!-- group3 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
<!-- group4 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
</tr>
</table>
</body>
</html>
EDIT: So far I did this, and almost got it. But the spaces between first and last groups are not even. Any ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
table.ball {empty-cells: show}
table.ball td {text-align:center;border:1px solid blue;}
table.ball td:nth-last-of-type(1) {text-align:right; }
table.ball td:nth-of-type(1) {text-align:left;}
select.sorter {width:180px}
</style>
</head>
<body>
<table >
<tr>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
<td width="200">
text
</td>
</tr>
<tr>
<td colspan="5" align="middle" >
<table class="ball" width="100%" >
<colgroup>
</colgroup>
<tr>
<td>
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
<td>
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
<td>
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
<td>
<!-- group1 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Maybe this example is close to what you need. I eliminated some of your hard coded info and put it into css.
table {table-layout: fixed; border-collapse: collapse;}
td {width: 200px; border: 1px solid black;}
.sorter, .dir {width: 11.5%;}
td[colspan="5"] {text-align: center;}
11.5% width seemed to work well, even though mathematically it seemed that it should be closer to 12.5%, but the select elements were doing some funky stuff with having extra space to their right. However, the text-align: center keeps them evenly spaced nice.
Check the markup, I have added divs with class="group" for each of the group in the second row. Instead of adding tables inside table, you can add divs like this .
<tr>
<td colspan="5" align="justify">
<!-- group1 -->
<div class="group">
<select class="sorter" >
</select>
<select class="dir" >
</select>
</div>
<div class="group">
<!-- group2 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</div>
<div class="group">
<!-- group3 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</div>
<div class="group">
<!-- group4 -->
<select class="sorter" >
</select>
<select class="dir" >
</select>
</div>
</td>
</tr>
And in the css :
.group{
width:25%;
}
Here is the updated code - Here is the fiddle http://jsfiddle.net/n2zEv/embedded/result/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
table.ball {empty-cells: show}
table.ball td {text-align:center;/*border:1px solid blue;*/}
table.ball td:nth-last-of-type(1) {text-align:right; }
table.ball td:nth-of-type(1) {text-align:left;}
select.sorter, select.dir {width:48.5%;}
</style>
</head>
<body>
<table border="1" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="200">text</td>
<td width="200">text</td>
<td width="200">text</td>
<td width="200">text</td>
<td width="200">text</td>
</tr>
<tr>
<td colspan="5" align="middle" >
<table class="ball" width="100%" cellpadding="0" cellspacing="0">
<colgroup></colgroup>
<tr>
<td>
<!-- group1 -->
<select class="sorter"></select>
<select class="dir"></select>
</td>
<td>
<!-- group2 -->
<select class="sorter"></select>
<select class="dir"></select>
</td>
<td>
<!-- group3 -->
<select class="sorter"></select>
<select class="dir"></select>
</td>
<td>
<!-- group4 -->
<select class="sorter"></select>
<select class="dir"></select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Related
I am trying to display three tables as three separated elements, displayed horizontally. This means that they should appear one alongside each other, from left to right. I tried to use inline-block and set the margins, borders but it doesn't work:
<div style="border:2px solid black; width:485px;">
<h1 align= "center" style="color:blue"> Interaction </h1>
<p style="display:inline-block; width:180px; margin:10px; padding:20px;">
<h3> Light </h3>
<table border="1">
<tr>
<td> Color </td>
<td> <input type="text" id="light-color" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Type </td>
<td>
<select id="light-type">
<option value="point"> Point Light </option>
<option value="spot"> Spot Light </option>
<option value="ambient"> Ambient Light </option>
<option value="area"> Area Light </option>
<option value="directional"> Directional Light </option>
<select>
</td>
</tr>
</table>
</p>
<p style="display:inline-block; width:180px; margin:10px; padding:20px;">
<h3> Material </h3>
<table border="1">
<tr>
<td> Diffuse </td>
<td> <input type="text" id="material-diffuse" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Ambient </td>
<td> <input type="text" id="material-ambient" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Emissive </td>
<td> <input type="text" id="material-emissive" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Specular </td>
<td> <input type="text" id="material-specular" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Shininess </td>
<td> <input type="text" id="material-shininess" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Type </td>
<td>
<select id="material-type">
<option value="lambert"> Lambert </option>
<option value="normal"> Normal </option>
<option value="phong"> Phong </option>
</select>
</td>
</tr>
</table>
</p>
<p style="display:inline-block; width:180px; margin:10px; padding:20px;">
<h3> Object </h3>
<table border="1">
<tr>
<td> Type </td>
<td>
<select>
<option value= "sphere"> Sphere </option>
<option value= "cube"> Cube </option>
<option value= "cylinder"> Cylinder </option>
</select>
</td>
</tr>
</table>
</p>
</div>
The tables are still displayed vertically.
My suggestion would be to change the containing p tags to divs and then float each one left and then clear them at the end. This will also be a more cross-browser solution.
<div style="border:2px solid black; width:485px;">
<h1 align= "center" style="color:blue"> Interaction </h1>
<div style="float:left; display:inline-block; width:180px; margin:10px; padding:20px;">
<h3> Light </h3>
<table border="1">
<tr>
<td> Color </td>
<td> <input type="text" id="light-color" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Type </td>
<td>
<select id="light-type">
<option value="point"> Point Light </option>
<option value="spot"> Spot Light </option>
<option value="ambient"> Ambient Light </option>
<option value="area"> Area Light </option>
<option value="directional"> Directional Light </option>
<select>
</td>
</tr>
</table>
</div>
<div style="float:left; display:inline-block; width:180px; margin:10px; padding:20px;">
<h3> Material </h3>
<table border="1">
<tr>
<td> Diffuse </td>
<td> <input type="text" id="material-diffuse" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Ambient </td>
<td> <input type="text" id="material-ambient" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Emissive </td>
<td> <input type="text" id="material-emissive" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Specular </td>
<td> <input type="text" id="material-specular" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Shininess </td>
<td> <input type="text" id="material-shininess" value="0xffffff"> </input> </td>
</tr>
<tr>
<td> Type </td>
<td>
<select id="material-type">
<option value="lambert"> Lambert </option>
<option value="normal"> Normal </option>
<option value="phong"> Phong </option>
</select>
</td>
</tr>
</table>
</div>
<div style="float:left; display:inline-block; width:180px; margin:10px; padding:20px;">
<h3> Object </h3>
<table border="1">
<tr>
<td> Type </td>
<td>
<select>
<option value= "sphere"> Sphere </option>
<option value= "cube"> Cube </option>
<option value= "cylinder"> Cylinder </option>
</select>
</td>
</tr>
</table>
</div>
<div style="clear:both;"></div>
</div>
Use float: left for first table.
Separate the next two tables with a left margin. e.g. margin-left: 120px;
It's a famous problem. For your future references. http://alistapart.com/article/holygrail
First, replace the paragraph tags with divs and then add the following class to each div;
.nextToEachOther {
float:left;
display:inline-block;
}
The issue that you're having is miss-understanding or the property inline-block.
If you simply use inline then the elements would float inline, defying any margin but still border would work.
If you use inline-block (same as your case) the elements would get the margins too, so I guess that is the issue.
What I would ask you to do is to either:
Remove all the margins and use inline-block. This way the elements will be placed as a inline and block. block is a display property's value. You can learn about it here: http://www.w3schools.com/cssref/pr_class_display.asp or go to Mozilla Developer Network here: https://developer.mozilla.org/en-US/docs/Web/CSS/display
You can remove the -block and use it simply as inline. This way even if you are having margins they won't be applied. And they all would be in a line.
One more thing:
You should always note the width of the elements, if any element gets a width more then the width of viewport, it will be placed under the other elements. So try using a width in percentage such as width: 10% this way browser will automatically shrink the element.
There is a specialty in the <p> element of HTML which allows it to be used without a closing tag. The next display:block tag (here: the <h3>) will auto-close the <p>, your closing </p> will be ignored.
Simplest solution is replacing <p> with <div>
i've the below HTML page containing 2 2 tables in 1 main table.
<%--
Document : P2
Created on : Mar 7, 2013, 1:19:55 PM
Author : u0138039
--%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form name="form1" method="post" action="">
<table width="722">
<tr>
<td width="334">
<table width="255" >
<tr>
<td width="128"><p>PARTS Updated
</p></td>
<td width="111"><label for="PARTS_Updated"></label>
<select name="PARTS_Updated" id="PARTS_Updated" >
<option value=""></option>
<option value="N/A">N/A</option>
</select></td>
</tr>
<tr>
<td><p>TSI OK
</p></td>
<td><label for="TSI_OK"></label>
<select name="TSI_OK" id="TSI_OK">
<option value="N/A">N/A</option>
<option value="TSI Query">TSI Query</option>
</select></td>
</tr>
<tr>
<td><p>Special Ins OK
</p></td>
<td><label for="Special_Ins_OK"></label>
<select name="Special_Ins_OK" id="Special_Ins_OK">
<option value="N/A">N/A</option>
<option value="SI Query">SI Query</option>
</select></td>
</tr>
</table></td>
<td width="376"><table width="279" align="center" height="44">
<tr>
<td width="87"><p>Shipment ID
</p></td>
<td width="97"><label for="Ship_ID"></label>
<input type="text" name="Ship_ID" id="Ship_ID"></td>
</tr>
</table></td>
</tr>
</table>
</form>
<h1> </h1>
</body>
</html>
when i'm commenting out the below part
<%--
Document : P2
Created on : Mar 7, 2013, 1:19:55 PM
Author : u0138039
--%>
i am getting the table as i wanted, but when i uncomment it the row space is changing, i.e. it is increasing. please let me know how to make the row space reduced and comment the above mentioned part.
Thanks
Check this Code:
<%-- Part 1 (Replace % with ! for HTML comment)
Document : P2
Created on : Mar 7, 2013, 1:19:55 PM
Author : u0138039
-->
<!DOCTYPE html>
<%-- Part 2 (Replace % with ! for HTML comment)
Document : P2
Created on : Mar 7, 2013, 1:19:55 PM
Author : u0138039
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form name="form1" method="post" action="">
<table width="722" border=1>
<tr>
<td width="334">
<table width="255" border=1>
<tr>
<td width="128"><p>PARTS Updated
</p></td>
<td width="111"><label for="PARTS_Updated"></label>
<select name="PARTS_Updated" id="PARTS_Updated" >
<option value=""></option>
<option value="N/A">N/A</option>
</select></td>
</tr>
<tr>
<td><p>TSI OK
</p></td>
<td><label for="TSI_OK"></label>
<select name="TSI_OK" id="TSI_OK">
<option value="N/A">N/A</option>
<option value="TSI Query">TSI Query</option>
</select></td>
</tr>
<tr>
<td><p>Special Ins OK
</p></td>
<td><label for="Special_Ins_OK"></label>
<select name="Special_Ins_OK" id="Special_Ins_OK">
<option value="N/A">N/A</option>
<option value="SI Query">SI Query</option>
</select></td>
</tr>
</table></td>
<td width="376"><table width="279" align="center" height="44" border=1>
<tr>
<td width="87"><p>Shipment ID
</p></td>
<td width="97"><label for="Ship_ID"></label>
<input type="text" name="Ship_ID" id="Ship_ID"></td>
</tr>
</table></td>
</tr>
</table>
</form>
<h1> </h1>
</body>
</html>
Case 1: If you commenting "Part1" and "Part2". Then:
Case 2: If you uncommenting "Part1" and commenting "Part2". Then:
Case 3: If you commenting "Part1" and uncommenting "Part2". Then:
Because the "DOCTYPE html" declaration is an instruction to the web browser about what version of HTML the page is written in.
In Case2 the first line is not this "DOCTYPE html" so web-browser not able to know the version on html, so it will not able to format the rest tag.
In Case3 the first line is this "DOCTYPE html" so web-browser able to know the version on html, so it will able to format the rest tag. So we are getting the formatted table.
iam new to web development, iam trying to move entire div to center of the page. But iam unable to do this, also not getting any error.
Below is the code of the html page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
#chart {
width:500px;
height:450px;
background-color:white;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
behavior: url(PIE/PIE.htc);
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Here goes some tilte</title>
<meta name="DESCRIPTION" content="Determine your ring size in different countries.">
<meta name="KEYWORDS"
content="ring, size, USA, american, german, french, british, japanese, swiss">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function changeValues(which) {
document.countries.D1.selectedIndex = which;
document.countries.D2.selectedIndex = which;
document.countries.D3.selectedIndex = which;
document.countries.D4.selectedIndex = which;
document.countries.D5.selectedIndex = which;
document.countries.D6.selectedIndex = which;
document.countries.D7.selectedIndex = which;
document.countries.D8.selectedIndex = which;
document.countries.D9.selectedIndex = which;
}
// --></script>
<link href="/style.css" rel="stylesheet" type="text/css">
<link href="/print.css" rel="stylesheet" type="text/css" media="print">
<script language="JavaScript" src="/misc_functions.js" type="text/javascript"></script>
</head>
<body bgcolor="pink">
<div align="center" id="chart" >
<center>
<table border="0" cellpadding="10" cellspacing="0" width="450">
<tr>
<td width="470" valign="top" class="content">
<div align="center">
<span class="red"><font color="Black"><h3>Here will be having a static data on the form<h3></font></span>
</div>
</td>
</tr>
</table>
<!-- Place main data here -->
<script language="JavaScript" src="/browser_detection.js" type="text/javascript"></script>
<noscript>
<blockquote>
<p><font size="3" color="#FF0000"><b>You do not have JavaScript enabled.</b></font><br>
<font size="2" color="#000080">The conversions on this site require the use of JavaScript so please enable before continuing.
For assistance in enabling JavaScript, please contact the webmaster.</font></p>
</blockquote>
</noscript>
<form method="POST" name="countries">
<div align="center">
<table border="0" style="border: 1px solid rgb(255,0,0)">
<tr>
<td align="center" bgcolor="#DFDFDF">USA </td>
<td align="center" bgcolor="#D5D5FF">INDIA</td>
<td align="center" bgcolor="#D5D5FF">PAKISTAN</td>
<td align="center" bgcolor="#D5D5FF">CHINA</td>
</tr>
<tr>
<td align="center" bgcolor="#DFDFDF"><select name="D1" size="1"
onChange="changeValues(document.countries.D1.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
<td align="center" bgcolor="#D5D5FF"><select name="D2" size="1"
onChange="changeValues(document.countries.D2.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
<td align="center" bgcolor="#D5D5FF"><select name="D3" size="1"
onChange="changeValues(document.countries.D3.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
<td align="center" bgcolor="#D5D5FF"><select name="D4" size="1"
onChange="changeValues(document.countries.D4.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
</tr>
</table>
</div>
<div align="center">
<table border="0" style="border: 1px solid rgb(255,0,0)">
<tr>
<td align="center" bgcolor="#DFDFDF">British</td>
<td align="center" bgcolor="#DFDFDF">French</td>
<td align="center" bgcolor="#DFDFDF">German</td>
<td align="center" bgcolor="#DFDFDF">Japanese</td>
<td align="center" bgcolor="#DFDFDF">Swiss</td>
</tr>
<tr>
<td align="center" bgcolor="#DFDFDF"><select name="D5" size="1"
onChange="changeValues(document.countries.D5.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
<td align="center" bgcolor="#DFDFDF"><select name="D6" size="1"
onChange="changeValues(document.countries.D6.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
<td align="center" bgcolor="#DFDFDF"><select name="D7" size="1"
onChange="changeValues(document.countries.D7.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
<td align="center" bgcolor="#DFDFDF"><select name="D8" size="1"
onChange="changeValues(document.countries.D8.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
<td align="center" bgcolor="#DFDFDF"><select name="D9" size="1"
onChange="changeValues(document.countries.D9.selectedIndex);">
<option> ---</option>
<option>Damodar</option>
</select></td>
</tr>
</table>
</div>
</center>
</form>
<table>
<tr>
<td>
<p align="center"><font color="#800000">Here will be having a static data on the form</font></p>
<p><font color="#000080"><big>Here will be having a static data on the form</big></font><ol>
<li><font color="#004080">Here will be having a static data on the form</font></li>
<li><font color="#004080">Here will be having a static data on the form</font></li>
</ol></p>
</td>
</tr>
<table>
</center>
</div>
</div>
</body>
</html>
Below iam attaching the screenshot, in that you can find the curvedbox, it is left to the page, i want that curved box and the under that elements to center.
Please can any one suggest how to do it
#chart {
margin: 0 auto;
}
Use margin to center things.
try
#chart {
margin: 0 auto;
}
<div id="chart" > //remove align
You have placed that div within a table. So you need to do few things.
<table border="0" cellpadding="10" cellspacing="0" width="450">
<tr>
<td width="470" valign="top" class="content">
<div align="center">
<span class="red"><font color="Black"><h3>Here will be having a static data on the form<h3></font></span>
Change the table with to 100%
Center the alignment of td which holds div and width to 100%
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td width="100%" valign="top" class="content" style="text-align:center;">
<div align="center">
I have two radio buttons what I want is that when I select one of them then a drop down list should appear and when other one is marked then drop down list should disappear and instead of it a text message should be displayed.
The code for this part is as follows --
<head>
<script type="text/javascript">
function showhide(r){
var t=r.form['mode'];
if (r.value=='none') {
t.setAttribute('disabled','disabled');
document.getElementById('data').innerHTML="option not supported";
}
else {
t.removeAttribute('disabled');
}
t.style.display=r.value;
}
</script>
</head>
<body>
<table>
<tr>
<td width="400" height="40">Protocol</td>
<td>
<table width="100%" name="table">
<tr>
<td style="text-align:center">
<input type="radio" name="protocol" value="" id="opt1" align="left" checked="checked" onclick="showhide(this)" />opt1
</td>
<td style="text-align:center">
<input type="radio" name="protocol" value="none" id="opt2" align="right" onclick="showhide(this)"/>opt2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="400" height="40">Mode of Operation</td>
<td id="data">
<select name="mode" id="mode">
<option value="opt1">TCP</option>
<option value="opt2">UDP</option>
</select>
</td>
</tr>
</table>
</bdoy>
Now the text message ("option not supported") is displayed once and then it doesn't disappear when switching between the radio buttons and so drop down list doesn't appear again.Where am i getting wrong?? If possible make correction in the code.
Please correct me..
<td name="data">
must be
<td id="data">
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.