How do I use max-height on <div> element? - html

I have a element that is set to contain a table element.
The table element will have anywhere from 0 to upwards of 350 rows.
I thought the easiest way to size this DIV element was to apply the max-height property so the DIV element would grow as content was added and add a scroll bar once the content exceeds the max-height property.
Code:
<div style="max-height:209px;overflow:auto;">
<table>
<tr><td>CONTENT</td></tr>
</table>
</div>
What I get instead is that when the content reaches the max-height limit, instead of applying the overflow property, the div element just keeps growing.
Of course this is only happening in IE7. Firefox and Safari work as designed.
edit: okay, here's the entire HTML page, ctrl+f "distances" for the area that I'm having problems with.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Voyage Planning | Tools | Discharge Ports</title>
<link rel="shortcut icon" type="image/x-icon" href="/vp/favicon.ico" />
<!--[if gte IE 6]><!-->
<link rel="stylesheet" type="text/css" href="/vp/_assets/css/screen.css" media="screen,projection,print" />
<script type="text/javascript" src="/vp/_assets/js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="/vp/_assets/js/main.js"></script>
<!--<![endif]-->
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
function dischargeport_selected()
{
if (document.postform.dpid.value == "")
{ window.location.href = "/vp/tools/dischargeports.asp"; }
else
{ window.location.href = "/vp/tools/dischargeports.asp?dpid=" + document.postform.dpid.value; }
}
function submitform()
{
if (validateform() && confirm("Are you sure you want to update this discharge port?"))
{
document.getElementById("spinner").style.display = "block";
document.getElementById("update").style.display = "none";
document.getElementById("spinner").innerHTML = "<img src='/vp/_assets/img/spinner.gif' alt='' />";
}
else
{ return false; }
}
function validateform()
{
var isformcomplete = true;
message = "The following tasks need to be completed \nbefore continuing:\n\n";
if (document.postform.name.value == "")
{
message += "* Enter the discharge port's name\n";
isformcomplete = false;
}
if (!is_numeric(document.postform.transittime.value))
{
message += "* Transit times must be numeric\n";
isformcomplete = false;
}
if ( !is_numeric($("#port_costs").val()) )
{
message += "* Port costs must be numeric\n";
isformcomplete = false;
}
if (isformcomplete == false)
{
alert(message);
}
return isformcomplete;
}
//-->
</script>
<div id="container">
<div id="content">
<div id="header">
<div id="development">
WEB SERVER:
<span class="highlight"> DEV </span>
SQL SERVER:
<span class="highlight"> DEV </span>
</div>
<span class="logo"><img src="/vp/_assets/img/header/logo.gif" /></span>
<span class="randomPics"><img src="/vp/_assets/img/header/header4.gif" /></span>
</div>
<div class="clear"></div>
<div id="menu">
<span class="nav">
Main Menu >
Tools >
Discharge Ports
</span>
<span class="icons"><img src="/vp/_assets/img/icons/new.gif" alt="New" /><span class="spacer"></span><img src="/vp/_assets/img/icons/logoff.gif" alt="Logoff" /></span>
</div>
<table>
<caption>Edit discharge port</caption>
</table>
<br />
<form method="post" action="/vp/tools/scripts/updatedischargeport.asp" name="postform" onSubmit="return submitform();">
<input type="hidden" name="fromsubmit" value="true" />
<input type="hidden" name="edit" value="true" />
<table class="form fourcolumn">
<tr>
<th><span class="tooltip long" title="To edit an existing discharge port, select one from the drop down list">Discharge ports</span></th>
<td>
<select name="dpid" class="large" onChange="dischargeport_selected();">
<option value="" ></option>
<option value="14" >AG [BUE] BUENOS AIRES</option>
<option value="126" >AG [ZZZ] Test</option>
<option value="107" >AG [ZAR] ZARATE</option>
<option value="4" selected="selected">AL [ALG] ALGERIA</option>
<option value="15" >AR [BUE] BUENOS AIRES</option>
<option value="109" >AR [CAM] CAMPANA</option>
<option value="27" >AR [DEL] DETLA DOCK</option>
<option value="55" >AR [MON] MONTEVIDEO</option>
<option value="108" >AR [ZAR] ZARATE</option>
<option value="3" >AU [ADE] ADELAIDE</option>
<option value="13" >AU [BRI] BRISBANE</option>
<option value="53" >AU [MEL] MELBOURNE</option>
<option value="116" >AU [NWC] NEW CASTLE</option>
<option value="65" >AU [PTK] PORT KEMBLA</option>
<option value="95" >AU [SYD] SYDNEY</option>
<option value="102" >AU [WEL] WELLINGTON</option>
<option value="5" >BL [ANT] ANTOFAGASTA</option>
<option value="8" >BL [ARI] ARICA</option>
<option value="110" >BR [ANG] ANGRA DOS REIS</option>
<option value="7" >BR [ARA] ARATU</option>
<option value="86" >BR [SEP] ITAGUAI</option>
<option value="63" >BR [PAR] PARANAGUA</option>
<option value="76" >BR [REC] RECIFE</option>
<option value="77" >BR [RGR] RIO GRANDE</option>
<option value="114" >BR [SAL] SALVADOR</option>
<option value="81" >BR [SAN] SANTOS</option>
<option value="113" >BR [FRA] SAO FRANCISCO DO SUL</option>
<option value="83" >BR [SAO] SAO SEBASTIAO</option>
<option value="78" >CA [RIJ] RIJEKA</option>
<option value="6" >CH [ANT] ANTOFAGASTA</option>
<option value="9" >CH [ARI] ARICA</option>
<option value="48" >CH [LIR] LIRQUEN</option>
<option value="82" >CH [SAN] SAN ANTONIO</option>
<option value="11" >CL [BAR] BARRANQUILLA</option>
<option value="16" >CL [BUE] BUENAVENTURA</option>
<option value="121" >CL [CAR] CARTAGENA</option>
<option value="25" >CN [DAL] DALIEN</option>
<option value="29" >CN [FNC] FANGCHENG</option>
<option value="120" >CN [LIA] LIANYUNGANG</option>
<option value="60" >CN [NAN] NANJING</option>
<option value="111" >CN [NTG] NANTONG</option>
<option value="73" >CN [QIN] QINHUANGDAO</option>
<option value="87" >CN [SHA] SHANGHAI</option>
<option value="88" >CN [SHE] SHEKOU</option>
<option value="18" >CR [CAL] CALDERA</option>
<option value="80" >DR [RIO] RIO HAINA</option>
<option value="32" >EC [GUA] GUAYAQUIL</option>
<option value="125" >EG [ALX] ALEXANDRIA</option>
<option value="17" >EG [CAI] CAIRO</option>
<option value="2" >ES [ACA] ACAJUTLA</option>
<option value="68" >GU [PTQ] PUERTO QUETAZAL</option>
<option value="69" >HN [PTQ] PUERTO QUETZAL</option>
<option value="36" >ID [JAK] JAKARTA</option>
<option value="40" >ID [KAU] KUATAN</option>
<option value="52" >ID [MED] MEDAN</option>
<option value="85" >ID [SEM] SEMARANG</option>
<option value="94" >ID [SUR] SURABAYA</option>
<option value="19" >IN [CAL] CALCUTTA</option>
<option value="38" >IN [KAN] KANDLA</option>
<option value="33" >IS [HAI] HAIFA</option>
<option value="42" >JM [KIN] KINGSTON</option>
<option value="21" >JP [CHI] CHIBA</option>
<option value="122" >JP [HAK] HAKATA</option>
<option value="41" >JP [KAW] KAWASAKI</option>
<option value="43" >JP [KOK] KOKURA</option>
<option value="49" >JP [MAI] MAIZURU</option>
<option value="54" >JP [MIZ] MIZUSHIMA</option>
<option value="61" >JP [NAN] NAN-YO TOSOH</option>
<option value="119" >JP [NII] NIIHAMA</option>
<option value="123" >JP [ONA] ONAHAMA</option>
<option value="62" >JP [OSA] OSAKA</option>
<option value="89" >JP [SHI] SHIKIMA</option>
<option value="96" >JP [TAC] TACHIBANA</option>
<option value="104" >JP [YOK] YOKKAICHI</option>
<option value="35" >KR [INC] INCHEON</option>
<option value="46" >KR [KUN] KUNSAN</option>
<option value="71" >KR [PUS] PUSAN</option>
<option value="50" >KR [MAI] TRANSHIP TO MAIZURU</option>
<option value="101" >KR [ULS] ULSAN</option>
<option value="12" >ML [BIN] BINTULU</option>
<option value="45" >ML [KUA] KUANTAN</option>
<option value="64" >ML [PAS] PASIR GUDANG</option>
<option value="66" >ML [PTK] PORT KLANG</option>
<option value="58" >MV [MV] MEXICO - VITRO</option>
<option value="59" >MX [MX] MEXICO - NON-VITRO</option>
<option value="47" >NI [LAG] LAGOS</option>
<option value="57" >NZ [MTM] MT MANGANUE</option>
<option value="99" >NZ [TAU] TAURANGA</option>
<option value="103" >NZ [WEL] WELLINGTON</option>
<option value="10" >PA [BAL] BALBOA</option>
<option value="20" >PE [CAL] CALLAO</option>
<option value="72" >PK [QAS] </option>
<option value="39" >PK [KAR] KARACHI</option>
<option value="51" >PL [MAN] MANILA</option>
<option value="30" >PO [GDA] GDANSK</option>
<option value="91" >PO [STE] STETTIN</option>
<option value="84" >PO [SCZ] SZCZECIN</option>
<option value="117" >RA [KLA] KLAIPEDA</option>
<option value="115" >RA [SPT] ST. PETERSBURG</option>
<option value="79" >RJ [RIJ] RIJEKA WAREHOUSE</option>
<option value="23" >SA [CT] CAPE TOWN</option>
<option value="28" >SA [DUR] DURBAN</option>
<option value="90" >SG [SIN] SINGAPORE</option>
<option value="26" >SI [DAM] DAMMAM</option>
<option value="37" >SI [JED] JEDDAH</option>
<option value="74" >SI [RAK] RAK</option>
<option value="92" >TG [SUA] SUAO</option>
<option value="97" >TG [TAI] TAICHUNG</option>
<option value="1" >TH [01] KOS</option>
<option value="44" >TH [KOS] KOSICHANG</option>
<option value="31" >TK [GEM] GEMLIK</option>
<option value="100" >TK [TEK] TEKIRDAG</option>
<option value="70" >TR [PTS] PORT OF SPAIN</option>
<option value="124" >TW [KEE] KEELUNG</option>
<option value="93" >TW [SUA] SUAO</option>
<option value="98" >TW [TAI] TAICHUNG</option>
<option value="75" >UE [RAK] RAS AL KHAIMAH</option>
<option value="56" >UR [MON] MONTEVIDEO</option>
<option value="22" >VN [CL] CAI LAN</option>
<option value="34" >VN [HO] HO CHI MIN</option>
<option value="24" >VZ [CUM] CUMANA</option>
<option value="67" >VZ [PTO] PUERTO CABELLO</option>
</select>
</td>
<td colspan="2"></td>
</tr>
<tr><td class="break" colspan="4"><hr /></td></tr>
<tr>
<th>Country</th>
<td>
<strong>AL [Algeria]</strong>
</td>
<td colspan="2"></td>
</tr>
<tr>
<th>Code</th>
<td>
<strong>ALG</strong>
</td>
<td colspan="2"></td>
</tr>
<tr><td class="break" colspan="4"><hr /></td></tr>
<tr>
<th>Name<span class="required">*</span></th>
<td><input type="text" class="large" name="name" value="ALGERIA" maxlength="30" /></td>
<td colspan="2"></td>
</tr>
<tr><td class="break" colspan="4"><hr /></td></tr>
<tr>
<th>Surveyor</th>
<td><input type="text" class="large" name="surveyor" value="SGS" maxlength="30" /></td>
<td colspan="2"></td>
</tr>
<tr>
<th>Ship agent</th>
<td><input type="text" class="large" name="shipagent" value="EUROMAR" maxlength="30" /></td>
<td colspan="2"></td>
</tr>
<tr>
<th>Transit time</th>
<td><input type="text" class="small" name="transittime" value="0" maxlength="3" /></td>
<td colspan="2"></td>
</tr>
<tr><td class="break" colspan="4"><hr /></td></tr>
<tr>
<th>Port costs</th>
<td><input type="text" class="small" name="port_costs" id="port_costs" value="0" maxlength="10" /> <strong>($)</strong></td>
<td colspan="2"></td>
</tr>
</table>
<br />
<table><caption class="subcaption">Distance to load ports</caption></table>
<br />
<table class="form fourcolumn">
<tr>
<th>Load ports</th>
<td>
<select name="add_loadport" class="large">
<option value="" selected="selected"></option>
<option value="BEA" >BEA [BEAUMONT]</option>
<option value="BRO" >BRO [BROWNSVILLE]</option>
<option value="CAS" >CAS [CASTELLON ESP]</option>
<option value="LAR" >LAR [LAREDO]</option>
<option value="LBC" >LBC [LONG BEACH CA.]</option>
<option value="LON" >LON [LONGVIEW WA]</option>
<option value="LOS" >LOS [LOS ANGELES]</option>
<option value="OTH" >OTH [OTHER]</option>
<option value="POR" >POR [PORT ARTHUR TX]</option>
<option value="PTL" >PTL [PORTLAND OR.]</option>
<option value="RAK" >RAK [RAS AL KAIMAH]</option>
<option value="RIJ" >RIJ [RIJEKA]</option>
<option value="SAN" >SAN [SAN DIEGO CA]</option>
<option value="TRO" >TRO [TRONA]</option>
<option value="ZZZ" >ZZZ [Test]</option>
</select>
</td>
<th>Nautical miles</th>
<td><div style="float:left;"><input type="text" class="small" name="add_loadport_nauticalmiles" id="add_loadport_nauticalmiles" value="0" maxlength="10" /></div><div style="float:right;"><img src="/vp/_assets/img/buttons/add.gif" name="add_loadport_btn" id="add_loadport_btn" alt="" /></div></td>
</tr>
</table>
<br />
<div style="max-height:197px;overflow:auto;">
<table class="distances">
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
<tr>
<th>To</th>
<td>[BRO] BROWNSVILLE</td>
<th>Nautical miles</th>
<td><input type="text" class="small" name="" id="" value="0" maxlength="10" /></td>
</tr>
</table>
</div>
<br />
<table><caption class="subcaption">Distance to discharge ports</caption></table>
<br />
<table class="form fourcolumn">
<tr>
<th>Discharge ports</th>
<td>
<select name="add_dischargeport" class="large">
<option value="" selected="selected"></option>
<option value="14" >AG [BUE] BUENOS AIRES</option>
<option value="126" >AG [ZZZ] Test</option>
<option value="107" >AG [ZAR] ZARATE</option>
<option value="4" >AL [ALG] ALGERIA</option>
<option value="15" >AR [BUE] BUENOS AIRES</option>
<option value="109" >AR [CAM] CAMPANA</option>
<option value="27" >AR [DEL] DETLA DOCK</option>
<option value="55" >AR [MON] MONTEVIDEO</option>
<option value="108" >AR [ZAR] ZARATE</option>
<option value="3" >AU [ADE] ADELAIDE</option>
<option value="13" >AU [BRI] BRISBANE</option>
<option value="53" >AU [MEL] MELBOURNE</option>
<option value="116" >AU [NWC] NEW CASTLE</option>
<option value="65" >AU [PTK] PORT KEMBLA</option>
<option value="95" >AU [SYD] SYDNEY</option>
<option value="102" >AU [WEL] WELLINGTON</option>
<option value="5" >BL [ANT] ANTOFAGASTA</option>
<option value="8" >BL [ARI] ARICA</option>
<option value="110" >BR [ANG] ANGRA DOS REIS</option>
<option value="7" >BR [ARA] ARATU</option>
<option value="86" >BR [SEP] ITAGUAI</option>


http://msdn.microsoft.com/en-us/library/ms530809(VS.85).aspx
says that max-height doesn't work with tables. try removing the table that is inside your div.


IE has supported max-height since IE7 — but only in Standards (AKA Strict) mode.
Make sure you have a Doctype that triggers standards mode as the first thing in your document. (Quirks mode can screw up a lot of things, so never write a document without a Standards mode triggering Doctype unless you have a very very good reason to do so).


In addition to max-wdith, you may use the following expression to make sure it is cross browser compatible:
width: expression(this.width > 400 ? "400px" : true);
height: expression(this.height > 400 ? "400px" : true)
reference: http://www.fastechws.com/tricks/web/image-max-width-height.php


Try setting just the height, and overflow to 'scroll'. Visually, there may not be a difference between the outter-box being full-height, and it not being full-height. If that is the case, I would simply refrain from using max-height in place of height.
Could you show us a bit more of your code, or perhaps an online demonstration? I'd be interested in seeing some of the css, and the doctype.


What version of IE7 are you using? Max-height support wasn't added until beta 2.
The scrollbar shows up in the Compatibility View (the IE7 engine) in IE8.
Are you sure you aren't using IE6?


I just copy and pasted your code, and then dropped in a php loop to create 200 rows or just 2 and it behaves the same in IE 7, Safari, and Firefox.
You probably aren't declaring a doctype, that creates the problem you're describing in my test.
Or in your real code you haven't properly defined overflow:auto. Your issue is exactly what would happen if that was the case.
It's defined here in the question, but maybe not your code.

Related

Bootstrap Table Placement of Cells in Row

I have a Bootstrap table with 2 columns which appears correctly as follows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<tr>
<td>Address One:</td>
<td><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
</tr>
<tr>
<td>Address Two:</td>
<td><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
</tr>
<tr>
<td>Suburb:</td>
<td><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
</tr>
<tr>
<td>State:</td>
<td>
<select class="form-control shipmentState" name="shipToState" id="shipToState">
<option value=""></option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
</select>
</td>
</tr>
<tr>
<td>Postcode:</td>
<td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
</tr>
<tr>
<td>Country:</td>
<td>
<select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry">
<option value=""></option>
<option value="Australia">Australia</option>
<option value="Japan">Japan</option>
</select>
</td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
</tr>
</table>
I would now like to combine the State and Postcode so they appear on the same line as they don't require a lot of space each, but when I combine these they stretch outside of the other rows like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<tr>
<td>Address One:</td>
<td><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
</tr>
<tr>
<td>Address Two:</td>
<td><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
</tr>
<tr>
<td>Suburb:</td>
<td><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
</tr>
<tr>
<td>State:</td>
<td>
<select class="form-control shipmentState" name="shipToState" id="shipToState">
<option value=""></option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
</select>
</td>
<td>Postcode:</td>
<td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
</tr>
<tr>
<td>Country:</td>
<td>
<select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry">
<option value=""></option>
<option value="Australia">Australia</option>
<option value="Japan">Japan</option>
</select>
</td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
</tr>
</table>
and I can't work out how to keep the original width and combine the state/postcode into that original width.

I have tried this by adding colspan="2" in each element. So that each td takes a width of 2 columns in each row except State and Postcode row.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<tr>
<td colspan="2">Address One:</td>
<td colspan="2"><input type="text" class="form-control" name="shipToAddressOne" id="shipToAddressOne" placeholder="Address One" value=""></td>
</tr>
<tr>
<td colspan="2">Address Two:</td>
<td colspan="2"><input type="text" class="form-control" name="shipToAddressTwo" id="shipToAddressTwo" placeholder="Address Two" value=""></td>
</tr>
<tr>
<td colspan="2">Suburb:</td>
<td colspan="2"><input type="text" class="form-control" name="shipToSuburb" id="shipToSuburb" placeholder="Suburb" value=""></td>
</tr>
<tr>
<td>State:</td>
<td>
<select class="form-control shipmentState" name="shipToState" id="shipToState">
<option value=""></option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
</select>
</td>
<td>Postcode:</td>
<td><input type="text" class="form-control" name="shipToPostcode" id="shipToPostcode" placeholder="Postcode" value=""></td>
</tr>
<tr>
<td colspan="2">Country:</td>
<td colspan="2">
<select class="form-control shipmentCountry" name="shipToCountry" id="shipToCountry">
<option value=""></option>
<option value="Australia">Australia</option>
<option value="Japan">Japan</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">Phone:</td>
<td colspan="2"><input type="text" class="form-control" name="shipToPhone" id="shipToPhone" placeholder="Phone" value=""></td>
</tr>
</table>
Further to make it look better you can right-align the labels.

How to merge two rows of a HTML table?

I have searched in google but i don't find any solution of my issue.Could anyone tell me how to merge Group and GPA/CGPA, Out of rows?
For better view of my code see: BOOTPLY.
What i want:
This is my code, so far:
<table class="table table-bordered table-hover table-condensed table-responsive">
<thead>
<tr>
<th class="tg-yw4l" rowspan="2">Level</th>
<th class="tg-yw4l" rowspan="2">Name of Examination</th>
<th class="tg-yw4l" rowspan="2">Year of Study</th>
<th class="tg-yw4l" rowspan="2">Group /Subject</th>
<th class="tg-yw4l" rowspan="2">Division/
Class/Grade </th>
<th class="tg-yw4l" colspan="2">Grade</th>
<th class="tg-yw4l" rowspan="2">Board /University</th>
<th class="tg-yw4l" rowspan="2">Year of Passing
[yyyy]</th>
<th class="tg-yw4l" rowspan="2">Result Published by Controller of Exam [dd/mm/yyyy]</th>
</tr>
</thead>
<tbody>
<tr>
<td>
SSC/Equivalent
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<th>GPA/CGPA</th>
<th>Out of</th>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
HSC/Equivalent
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
Graduation
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
<select name="Gradnoyear" id="Gradnoyear" class="breadcrumbcombo1" tabindex="38" style="visibility: visible;">
<option value="-1" selected="selected">--Select--</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
Post Graduation
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
</tbody>
</table>

I think you just need to move your headings from the tbody, into the theader and then add a couple of normal columns to the tbody to replace the headings we just moved (comments in code as to what I have moved and added):
<table class="table table-bordered table-hover table-condensed table-responsive">
<thead>
<tr>
<th class="tg-yw4l" rowspan="2">Level</th>
<th class="tg-yw4l" rowspan="2">Name of Examination</th>
<th class="tg-yw4l" rowspan="2">Year of Study</th>
<th class="tg-yw4l" rowspan="2">Group /Subject</th>
<th class="tg-yw4l" rowspan="2">Division/ Class/Grade</th>
<th class="tg-yw4l" colspan="2">Grade</th>
<th class="tg-yw4l" rowspan="2">Board /University</th>
<th class="tg-yw4l" rowspan="2">Year of Passing [yyyy]
</th>
<th class="tg-yw4l" rowspan="2">Result Published by Controller of Exam [dd/mm/yyyy]</th>
</tr>
<!-- put your other two headers from tbody here: -->
<tr>
<th>GPA/CGPA</th>
<th>Out of</th>
</tr>
</thead>
<tbody>
<tr>
<td>
SSC/Equivalent
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<!-- replace those headers we have moved with a couple of normal columns: -->
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
HSC/Equivalent
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
Graduation
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
<select name="Gradnoyear" id="Gradnoyear" class="breadcrumbcombo1" tabindex="38" style="visibility: visible;">
<option value="-1" selected="selected">--Select--</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
<tr>
<td>
Post Graduation
</td>
<td>
<select name="cboSSC" id="cboSSC" class="breadcrumbcombo1" tabindex="21" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="SSC">SSC</option>
<option value="Dakhil">Dakhil</option>
<option value="O Level">O Level</option>
</select>
</td>
<td>
</td>
<td>
<select name="cboSSCGroupSubject" id="cboSSCGroupSubject" class="breadcrumbSmall1" tabindex="22" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="Science">Science</option>
<option value="Arts">Arts</option>
<option value="Commerce">Commerce</option>
<option value="Business Studies">Business Studies</option>
<option value="Humanities">Humanities</option>
<option value="Others">Others</option>
</select>
</td>
<td>
<select name="cboSSCResult" id="cboSSCResult" class="breadcrumbcombo1" tabindex="23" onchange="setCGPA('SSC');" style="visibility: visible;">
<option value="-1">--Select--</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
<option value="Grade">Grade</option>
</select>
</td>
<td>
[CONTENT]
</td>
<td></td>
<td>
<input type="text" name="txtSSCBoard" id="txtSSCBoard" class="SL2TextField" tabindex="26" value="">
</td>
<td>
<input type="text" size="4" name="txtGradYear" id="txtGradYear" class="SLNumFieldSmall" onkeypress="return keypressOnNumberFld_new(event)" tabindex="43" value="" maxlength="4">
</td>
<td>
<input type="text" name="txtSSCResYear" id="txtSSCResYear" class="SLNumFieldMed" tabindex="28" value="" onkeydown="keypressOnDateFld();" maxlength="10" onblur="MyvalidDate(document.getElementById('txtSSCResYear').value,'txtSSCResYear')">
</td>
</tr>
</tbody>
</table>
Updated bootply

Submitting HTML Form to Struts 2 Action class

I am trying to submit HTML form to Struts 2 Action class, but after submitting the form, Action class is not getting triggered.
JSP Page:
Timesheet.jsp:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Team Activity Log</title>
<SCRIPT language="javascript">
function addRow(tableid)
{
var table = document.getElementById(tableid);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("select");
element1=document.getElementById("sele").cloneNode(true);
element1.type="select";
cell1.appendChild(element1);
var cell2=row.insertCell(1);
var element2 = document.createElement("input");
element2.type="text";
element2.setAttribute("placeholder","E.g:1234");
cell2.appendChild(element2);
var cell3=row.insertCell(2);
var element3 = document.createElement("input");
element3.type="text";
element3.setAttribute("placeholder","Brief your work");
cell3.appendChild(element3);
var cell4=row.insertCell(3);
var element4 = document.createElement("input");
element4.type="text";
element4.setAttribute("placeholder","MM min");
cell4.appendChild(element4);
var cell5=row.insertCell(4);
var element5 = document.createElement("img");
element5.src="close.png";
element5.setAttribute("id","delete");
element5.setAttribute("onclick","changeImage(this)");
cell5.appendChild(element5);
}
function changeImage(temp)
{
(temp.parentElement).parentElement.remove();
}
function convert(tableid,temp2)
{
var table=document.getElementById(tableid);
console.log(table.rows.length);
var hidelement=document.getElementById(temp2);
hidelement.setAttribute("value",table.rows.length-1);
for(var i=1;i<table.rows.length;i++)
{
var tt="tt"+i;
var rf="rf"+i;
var des="des"+i;
var eff="eff"+i;
console.log("executing function");
var elemen=table.rows[i].cells[0].querySelector("*");
elemen.setAttribute("name",tt);
elemen=table.rows[i].cells[1].querySelector("*");
elemen.setAttribute("name",rf);
elemen=table.rows[i].cells[2].querySelector("*");
elemen.setAttribute("name",des);
elemen=table.rows[i].cells[3].querySelector("*");
elemen.setAttribute("name",eff);
}
}
</script>
</head>
<body>
<INPUT type="button" value="Add Row" onclick="addRow('matrix')" />
<%# taglib uri="/struts-tags" prefix="s" %>
<s:url id="myActionUrl" action="timesheetprocess" />
<form action=<s:property value="%{myActionUrl}" />>
<input type="hidden" id="taskcount" value="5">
<table id="matrix">
<tr>
<th>Task Type</th>
<th>Reference ID</th>
<th>Description</th>
<th>Efforts</th>
<th></th>
</tr>
<tr>
<td>
<select id="sele">
<option value="" disabled selected>Select your option</option>
<option value="SR">SR</option>
<option value="CR">CR</option>
<option value="ALM">ALM</option>
<option value="INCIDENT">INCIDENT</option>
<option value="OTHER">OTHER</option>
</select></TD>
<td>
<INPUT type="text" placeholder="E.g:1234"/>
</td>
<td>
<INPUT type="text" placeholder="Brief your work"/>
</td>
<td>
<INPUT type="text" placeholder="MM min" />
</td>
<td>
<img id="delete" src="close.png" onclick="changeImage(this)">
</td>
</tr><tr>
<td>
<select id="sele">
<option value="" disabled selected>Select your option</option>
<option value="SR">SR</option>
<option value="CR">CR</option>
<option value="ALM">ALM</option>
<option value="INCIDENT">INCIDENT</option>
<option value="OTHER">OTHER</option>
</select></TD>
<td>
<INPUT type="text" placeholder="E.g:1234"/>
</td>
<td>
<INPUT type="text" placeholder="Brief your work"/>
</td>
<td>
<INPUT type="text" placeholder="MM min" />
</td>
<td>
<img id="delete" src="close.png" onclick="changeImage(this)">
</td>
</tr>
<tr>
<td>
<select id="sele">
<option value="" disabled selected>Select your option</option>
<option value="SR">SR</option>
<option value="CR">CR</option>
<option value="ALM">ALM</option>
<option value="INCIDENT">INCIDENT</option>
<option value="OTHER">OTHER</option>
</select></TD>
<td>
<INPUT type="text" placeholder="E.g:1234"/>
</td>
<td>
<INPUT type="text" placeholder="Brief your work"/>
</td>
<td>
<INPUT type="text" placeholder="MM min" />
</td>
<td>
<img id="delete" src="close.png" onclick="changeImage(this)">
</td>
</tr>
<tr>
<td>
<select id="sele">
<option value="" disabled selected>Select your option</option>
<option value="SR">SR</option>
<option value="CR">CR</option>
<option value="ALM">ALM</option>
<option value="INCIDENT">INCIDENT</option>
<option value="OTHER">OTHER</option>
</select></TD>
<td>
<INPUT type="text" placeholder="E.g:1234"/>
</td>
<td>
<INPUT type="text" placeholder="Brief your work"/>
</td>
<td>
<INPUT type="text" placeholder="MM min" />
</td>
<td>
<img id="delete" src="close.png" onclick="changeImage(this)">
</td>
</tr>
<tr>
<td>
<select id="sele">
<option value="" disabled selected>Select your option</option>
<option value="SR">SR</option>
<option value="CR">CR</option>
<option value="ALM">ALM</option>
<option value="INCIDENT">INCIDENT</option>
<option value="OTHER">OTHER</option>
</select></TD>
<td>
<INPUT type="text" placeholder="E.g:1234"/>
</td>
<td>
<INPUT type="text" placeholder="Brief your work"/>
</td>
<td>
<INPUT type="text" placeholder="MM min" />
</td>
<td>
<img id="delete" src="close.png" onclick="changeImage(this)">
</td>
</tr>
</table>
<INPUT type="button" value="Submit" onclick="convert('matrix','taskcount')" />
</form>
</body>
</html>
Corresponding action tag in Struts.xml :
<action name="timesheetprocess" class="com.App.Controller.Timesheet.Timeprocess"
method="execute">
<result name="success">Time.jsp</result>
</action>
How to submit HTML form to Struts 2 action class?

To submit a form you can use input element of type submit
<INPUT type="submit" value="Submit" onclick="convert('matrix','taskcount')" />
or as of you already using Struts tags
<s:submit value="Submit" onClick="convert('matrix','taskcount')" />

Add a drop down in a table using HTML

I am trying to add a drop down box in a table as a part of registration form.
Here is my code below :-
<html>
<body></body>
<h1>Cab</h1>
<TABLE BORDER="0">
<TR>
<TD>Name</TD>
<TD ALIGN="left"><INPUT TYPE="text" SIZE="25" NAME="fname">
</TD>
</TR>
<TR>
<TD>Phone Number</TD>
<TD ALIGN="left"><INPUT TYPE="text" SIZE="25" NAME="phnnum">
</TD>
</TR>
<TR>
<TD class = "select">Online Password (Repeated)
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<TD ALIGN="center"></TD>
</TD>
</TR>
</TABLE>
<INPUT TYPE="submit" VALUE="Submit">
<INPUT TYPE="reset" VALUE="Clear">
</html>
When I do this the drop down box doesn't come in a format as the other fields come.
I want the drop down box right below the Text Field above it.

its because you have put "Online Password (Repeated)" text and drop down in a same column td
and the second TD is blank..
<TR>
<TD class = "select">Online Password (Repeated)
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<TD ALIGN="center"></TD>
</TD>
</TR>
replace above code with below
<TR>
<TD class = "select">Online Password (Repeated)
</TD>
<TD ALIGN="center">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</TD>
</TR>
I hope u can now find where u made mistake
check the jsfiddle

<html>
<body>
<h1>Cab</h1>
<TABLE BORDER="0">
<TR>
<TD>Name</TD>
<TD ALIGN="left">
<INPUT TYPE="text" SIZE="25" NAME="fname">
</TD>
</TR>
<TR>
<TD>Phone Number</TD>
<TD ALIGN="left">
<INPUT TYPE="text" SIZE="25" NAME="phnnum">
</TD>
</TR>
<TR>
<TD>Online Password (Repeated)</TD>
<TD ALIGN="left">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</TD>
</TR>
</TABLE>
<INPUT TYPE="submit" VALUE="Submit">
<INPUT TYPE="reset" VALUE="Clear">
</body>
</html>

Aligning table with an image HTML

I am trying to align a table next to image, which has text aligned with it currently. I want to have the dropdowns align with the lower edge of the image, can anyone assist me with this? Here is my code.
<input type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center">xxxxxx
<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr>
<tr>
<td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td>
<td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td>
</tr>

Based on your description, this is the best I could come up with using CSS to style it.
<style>
div {height: 180px;
width: 300px;}
#image {
float:left;
}
table { float:right;
margin-top: 130px;
}
</style>
<div>
<input id="image" type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center">
<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr>
<tr>
<td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td>
<td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td>
</tr></table></div>
But you can also fix the issue by using a table and then vertically aligning the contents of the second cell in the row to the bottom.
<table><tr><td>
<input id="image" type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center"></td>
<td valign="bottom"> <!-- This line right here is what does the trick -->
<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr>
<tr>
<td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td>
<td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td>
</tr></table>
</td></tr>
</table>
hope this helps!

Maybe you should go for the CSS3 , It has a lot properties like left , right or top .
I do not know css completely but their are a lot of tutorials on the internet.