Horizontal scrollbar problem

Hi all,

I'm working with a jsp which is the view for a picker in which only one coloumn is getting displayed.
I need a horizontal scroll bar in this picker for the only part in the picker which is highlighed in red in the following code.

Please help me guys as I've tried my best & still strugggling to do it.

<BODY onload="InitialListBox(popUpForm)">
		<FORM name="popUpForm" method="post">
			<TABLE width="100%" border="0" cellpadding="0" cellspacing="1">
				<TBODY>
					<TR>
						
						<TD align="center" class="clsPopUpHeading">Search Employee<BR></TD>
					</TR>
					<TR>
						<TD>
							<TABLE width="100%" border="0" cellpadding="0" cellspacing="1" align="center">
								<TBODY>
																			
									
									
										<TR>
											<TD width="1%"></TD>
											
											<TD align="left" class="clsLabel" nowrap="nowrap" width="40%">Employee Name:</TD>
											<TD align="left" width="59%" class="clsTextBox"><INPUT type="text" name="textFilter" width="10" >
												<INPUT type="button" value="Go" onclick="filterData('text')" class="clsButton">
											</TD>
										</TR>
									
								</TBODY>
							</TABLE>
						</TD>
					</TR>
					<TR>
						<TD> </TD>
					</TR>
					[color=red]<TR scrollbar=yes >
					
						<TD align="center" valign="top" scrollbar=yes >
							
							<SELECT STYLE ='width:50px' scrollbar=yes size=14 class='clsComboBox' name="popUp" ondblclick="selectItem('itemClick')" onkeypress="selectByKeyboard('itemClick')"></SELECT>
						</TD>
					
					</TR>[/color]					<TR>
						<TD align="center">
							<TABLE width="100%" border="0" cellpadding="0" cellspacing="1">
								<TBODY>
									<TR>
									
										<TD width="24%"></TD>
										<TD width="13%" align="center"><INPUT type="button" name="goFirst" id="goFirst" value="|<"
											onclick="first(popUpForm)" class="clsButton"></TD>
										<TD width="13%" align="center"><INPUT type="button" name="goPrevious" id="goPrevious"
											value="<<" onclick="previous(popUpForm)"
											class="clsButton"></TD>
										<TD width="13%" align="center"><INPUT type="button" name="goNext" id="goNext"
											value=">>" onclick="next(popUpForm)" class="clsButton"></TD>
										<TD width="13%" align="center"><INPUT type="button" name="goLast" id="goLast" value=">|"
											onclick="last(popUpForm)" class="clsButton"></TD>
										<TD width="24%"></TD>
									
									</TR>
								</TBODY>
							</TABLE> 
						</TD>
					</TR>
					
					<TR><TD> <BR/> </TD> </TR>
					<TR>
						<TD>
							<TABLE width="100%" border="0" cellpadding="0" cellspacing="1">
								<TBODY>
									<TR>
										<TD width="15%"></TD>
										<TD align="center" width="35%"><INPUT type="button" name="SelectValue" id="SelectValue" value=" OK "  onclick="selectItem('buttonClick')" class="clsButton" size="40" ></TD>
										<TD align="center" width="35%"><INPUT type="button" name="Cancel" value="Cancel" onclick="window.close()" class="clsButton"></TD>
										<TD width="15%"></TD>
									</TR>
								</TBODY>
							</TABLE> 
						</TD>
					</TR>
					
				</TBODY>
			</TABLE>
		</FORM>
	</BODY>
</HTML>

Did your . key get stuck? I hate when that happens.

Set a width and set the CSS overflow.

FYI: format tags do not work in code areas. Take a look.

Eric

I have removed the extraneous punctuation from the subject. Please refrain.