title: How can I create a table div with auto width?
body: <p>I'm trying to create DIV HEAD as a table, but when I add another head it shows down and not to the right.</p>
  
  <p>In other words, I want the table to be six columns wide, but it is only 3, and the rows start to stack.</p>
  
  <p>Here is a live demo:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .rTable {    
       display: block;
       width: 100%;
       font-size: 10px; 
      } 
      
      .rTableHeading, .rTableBody, .rTableFoot, .rTableRow{ 
       clear: both; 
      } 
      
      .rTableHead, .rTableFoot{    
        background-color: #DDD;    
        font-weight: bold;
      }
      
      .rTableCell, .rTableHead {     
        border: 1px solid #999999;
        float: left; 
        height: 17px; 
        overflow: hidden;
        padding: 3px 1.8%; 
        width: 28%;
      } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;div class="rTable"&gt; 
        &lt;div class="rTableRow"&gt; 
          &lt;div class="rTableHead"&gt;HEAD 1&lt;/div&gt; 
          &lt;div class="rTableHead"&gt;HEAD 2&lt;/div&gt; 
          &lt;div class="rTableHead"&gt;HEAD 3&lt;/div&gt;  
          &lt;div class="rTableHead"&gt;HEAD 4&lt;/div&gt; 
          &lt;div class="rTableHead"&gt;HEAD 5&lt;/div&gt; 
          &lt;div class="rTableHead"&gt;HEAD 6&lt;/div&gt; 
        &lt;/div&gt; 
    
        &lt;div class="rTableRow" style="page-break-before:always;"&gt;
          &lt;div class="rTableCell"&gt;row 1.1&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 1.2&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 1.3&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 1.4&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 1.5&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 1.6&lt;/div&gt;  
        &lt;/div&gt; 
    
        &lt;div class="rTableRow" style="page-break-before:always;"&gt;
          &lt;div class="rTableCell"&gt;row 2.1&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 2.2&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 2.3&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 2.4&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 2.5&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 2.6&lt;/div&gt;  
        &lt;/div&gt; 
  
        &lt;div class="rTableRow" style="page-break-before:always;"&gt;
          &lt;div class="rTableCell"&gt;row 3.1&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 3.2&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 3.3&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 3.4&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 3.5&lt;/div&gt;  
          &lt;div class="rTableCell"&gt;row 3.6&lt;/div&gt;  
        &lt;/div&gt;  
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>