myfaces-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Andrew Robinson" <andrew.rw.robin...@gmail.com>
Subject Re: Want to Stop Text Wrap Around in Table Cells
Date Tue, 10 Jul 2007 20:15:17 GMT
TD ignores the overflow style attribute in my experience. I would suggest:

CSS:
DIV.nowrap { white-space: nowrap; overflow: auto; }

<h:dataTable>
  <h:column>
    <div class="nowrap">...</div>
  </h:column>
</h:dataTable>

On 7/10/07, Caroline Jen <jiapei_jen@yahoo.com> wrote:
> 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?
>
> code:
> --------------------------------------------------------------------------------
>
> ....<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>
>
>
>
>
> ____________________________________________________________________________________
> Get the Yahoo! toolbar and be alerted to new email wherever you're surfing.
> http://new.toolbar.yahoo.com/toolbar/features/mail/index.php
>

Mime
View raw message