Want to Stop Text Wrap Around Problem in Table Cells
I display a table inside a <div> because I want to show scrollbars. However, I have wrapped around text inside table cells although I provide enough width to each column and used white-space:nowrap; overflow-x:scroll. How do I make all text in each table cell displayed in one single line?
...
<style>
.scrollbar
{
overflow-y:auto;
overflow-x:scroll;
scrollbar-face-color: #C0C0C0;
scrollbar-arrow-color: #587090;
scrollbar-track-color: #90A0B0;
scrollbar-shadow-color: #7B7B7B;
scrollbar-highlight-color: #F9F9F9;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-Color: #8B8B8B;
}
.lovTableDefault
{
BORDER-TOP: #006699 1.5px solid;
BORDER-LEFT: #006699 1.5px solid;
BORDER-RIGHT: white 1.5px solid;
BORDER-BOTTOM: white 1.5px solid;
padding: 3px;
overflow-y:auto;
overflow-x:scroll;
white-space: nowrap;
}
.tableHeaderDefault
{
text-align: left;
white-space: nowrap;
FONT-SIZE: 0.7em;
FONT-FAMILY: Arial, Helvetica, sans-serif;
}
.codeColumn
{
text-align: left;
FONT-FAMILY: Verdana, sans-serif;
font-size:0.7em;
width: 7em;
white-space: nowrap;
border: 0;
}
.descriptionColumn
{
text-align: left;
FONT-FAMILY: Verdana, sans-serif;
font-size:0.7em;
width: 30em;
white-space: nowrap;
border: 0;
}
</style>
....
<div style="height:12em; width:20em;" id="container" class="scrollbar">
<h:dataTable value="#{countriesManagementBean.countriesList}" var="country"
id="countryTable" styleClass="lovTableDefault"
border="0" cellspacing="1" bgcolor="#FFFFFF"
headerClass="tableHeaderDefault" columnClasses="codeColumn, descriptionColumn" >
<h:column>
<f:facet name="header">
<h:outputText style="width:7em; white-space:nowrap;" value="Code"/>
</f:facet>
<h:outputText value="#{country.code}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText style="width:30em; white-space:nowrap;" value="Description"/>
</f:facet>
<h:outputText value="#{country.description}"/>
</h:column>
</h:dataTable>
</div>
....
....
