title: Adjusting width of column to content in p:dataTable
body: <p>I want the columns of my table to adjust its width to the biggest element.
  Like doubleclicking an excel-column...</p>
  
  <p>I've tried lots of attributes and solutions of other questions but nothing really did what i wanted.</p>
  
  <p>Here are my settings for the dataTable which is nested in a p:scollPanel:</p>
  
  <pre><code>&lt;p:dataTable scrollable="true" scrollWidth="auto" scrollHeight="390"
               tableStyle="width: auto; white-space: nowrap; font-size: smaller"
               id=carTable" var="vehicles"
               value="#{dgBean.vehicles}"&gt;
  </code></pre>
  
  <p>Using:</p>
  
  <ul>
  <li>primefaces 6.0</li>
  <li>jsf 2.2.1</li>
  </ul>
  
  <p>UPDATE:</p>
  
  <p>I don't know why, but it seems like table-layout: auto is not used AND two divs are generated. 1 for the Header of my table and the other for the body of my table.
  That's why the first layout I've posted shows up and the header and body fit nicely on their own but the header doesn't fit the body.</p>
  
  <p>Generated HTML:</p>
  
  <pre><code>&lt;div class="ui-widget-header ui-datatable-scrollable-header" style="width: 1199px;"&gt;
      &lt;div class="ui-datatable-scrollable-header-box" style="margin-right: 15px;"&gt;
          &lt;table role="grid"&gt;
              &lt;thead id="j_idt5:j_idt14:carTable_head"&gt;...&lt;/thead&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="ui-datatable-scrollable-body" tabindex="-1" style="height: 390px; margin-right: 0px; width: 1199px;"&gt;
      &lt;table role="grid"&gt;
          &lt;thead class="ui-datatable-scrollable-theadclone" style="height: 0px;"&gt;...&lt;/thead&gt;
          &lt;tbody id="j_idt5:j_idt14:carTable_data" class="ui-datatable-data ui-widget-content" tabindex="0"&gt;...&lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So it seems like 2 tables are generated. Does anyone have a clue how to fix this using pf?</p>
  
  <p>UPDATE from comment </p>
  
  <p>Applying </p>
  
  <pre><code>.ui-datatable-scrollable-header-box table, .ui-datatable-scrollable-footer-box table, .ui-datatable-scrollable-body table {
      table-layout: auto;
  }
  </code></pre>
  
  <p>to the <a href="http://www.primefaces.org/showcase/ui/data/datatable/scroll.xhtml" rel="noreferrer">Showcase</a>
  produces (deleted my former images as reputation is not high enough for more than 2):</p>
  
  <p><a href="http://i.stack.imgur.com/0pGCw.png" rel="noreferrer">Showcase with edited css</a></p>