title: How to remove the Horizontal Scroll bar in <p:dataTable>
body: <p>I am trying to hide the horizontal scrollbar in .<br/>
  I tried many solutions  but it doesn't seems to work.
  The Solution that I tried is given <a href="https://stackoverflow.com/questions/15795004/remove-horizontal-scroll-bar-on-background-div">here</a><br/>
  Here is my code used that I used in XHTML <br/></p>
  
  <pre><code>&lt;ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"&gt;
  
      &lt;h:form id="commentsform"&gt;
          &lt;p:outputPanel id="commenttable"&gt;
              &lt;p:dataTable id="commentsdt" var="row" stickyHeader="true"
                  value="#{bean.displayCommentsDetailsList}"
                  selection="#{bean.selectedComments}"
                  rowKey="#{row.commentDate}" rows="20" paginator="true"
                  paginatorPosition="bottom" rowIndexVar="index"
                  paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                  scrollable="true" scrollHeight="150" style="width:100%;overflow-x:hidden;overflow-y:auto;"
                  rowStyleClass="#{row.changeFieldFlg==true ? 'highlight' : null}"&gt;
  
                  &lt;f:facet name="header"&gt;
                      &lt;h:panelGrid columnClasses="alignRight"&gt;
                          &lt;p:commandButton
                              disabled="#{bean.editCmdActionflg == false}"
                              actionListener="#{bean.addComments}"
                              update="commentsdt :SystemDetailsinfoForm:line :growl :error"
                              partialSubmit="true" title="Add Row.." icon="ui-icon-plusthick"
                              styleClass="iconButton" /&gt;
                      &lt;/h:panelGrid&gt;
                  &lt;/f:facet&gt;
  
                  &lt;p:column width="160" headerText="Date" style="width:150px"&gt;
                      &lt;h:outputText value="#{row.commentDate}" style="width:150px" /&gt;
                  &lt;/p:column&gt;
                  &lt;p:column width="160" headerText="Author" style="width:150px"&gt;
                      &lt;h:outputText value="#{row.author}" style="width:150px" /&gt;
                  &lt;/p:column&gt;
                  &lt;p:column width="100" headerText="Deliverable" style="width:90px"
                      rendered="#{bean.selectedChoice == '2'}"&gt;
                      &lt;h:outputText value="#{row.delivName}"
                          rendered="#{bean.selectedChoice == '2'}"
                          style="width:90px" /&gt;
                  &lt;/p:column&gt;
                  &lt;p:column headerText="Comments"&gt;
                      &lt;div align="left"&gt;
                          &lt;h:outputText value="#{row.comments}"
                              rendered="#{row.editableflg==false}"&gt;&lt;/h:outputText&gt;
                          &lt;p:inputTextarea value="#{row.comments}"
                              style="width:98%;float:left" rendered="#{row.editableflg==true}"&gt;
                          &lt;/p:inputTextarea&gt;
                      &lt;/div&gt;
                  &lt;/p:column&gt;
  
              &lt;/p:dataTable&gt;
          &lt;/p:outputPanel&gt;
      &lt;/h:form&gt;
  &lt;/ui:composition&gt;&lt;br/&gt;
  </code></pre>
  
  <p>I tried using  overflow-y: scroll;overflow-x: hidden; to hide the horzontal scrollbar but none of them seems to get applied to the datatable.<br/>
  Please let me know your suggestions to resolve this issue</p>