title: primefaces dataTable style?
body: <p>I want to create a table using primefaces but my table column's width isn't equal for the header and body. I tried to add <code>style="width: inherit"</code> or <code>style="width: 30%"</code> for each column but the width still uneven between the table header and table body. The table will nicely uniform if it's not scroll-able but I want a scroll-able table.
  Here is my code:</p>
  
  <pre><code>&lt;h:panelGrid columns="1" class="plan-panel" columnClasses="label, value"&gt;
      &lt;h:outputText class="deploy-label" value="Table 1"/&gt;
      &lt;p:dataTable var="service" value="aaaa"
                   id="service-table" scrollable="true" scrollHeight="250"&gt;
          &lt;p:column headerText="Col1" width="20"&gt;
              &lt;h:outputText value="test122222222222"/&gt;
          &lt;/p:column&gt;
          &lt;p:column headerText="Col2" width="20"&gt;
              &lt;h:outputText value="test255567y774"/&gt;
          &lt;/p:column&gt;
          &lt;p:column headerText="Col3" width="20"&gt;
              &lt;h:outputText value="test3433666"/&gt;
          &lt;/p:column&gt;
          &lt;p:column headerText="Col4" width="20"&gt;
              &lt;h:outputText value="test43364667"/&gt;
          &lt;/p:column&gt;
      &lt;/p:dataTable&gt;
  
  &lt;/h:panelGrid&gt;
  </code></pre>
  
  <p>This is how the table looks like:
  <a href="https://i.stack.imgur.com/5wuor.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5wuor.png" alt="enter image description here"></a></p>
  
  <p>I wonder if anyone knows how to apply style on this table so the table's header and body width are equal.</p>
  
  <p>Thanks</p>