title: div (table-cell) does not expand when width is set to 100%
body: <p>I convert table element to all divs, but div of  element does not expand like colspan="5" when width attribute is set 100%. How to make it expands full width? How to expand full width 2nd row?</p>
  
  <p><img src="https://i.stack.imgur.com/uKOUl.png" alt="enter image description here"></p>
  
  <pre><code>&lt;style&gt;
      .table {
          display: table;
          width: 100%;          
      }
      .tr {
          display: table-row;   
          width: 100%;         
      }
      .td {
          display: table-cell;
          width: 100%;
          padding: 10px;
          border: black solid 1px;
      }
  &lt;/style&gt;
  
  
  
  &lt;div class="table"&gt;
          &lt;div class="tr"&gt;
              &lt;div class="td"&gt;Product&lt;/div&gt;
              &lt;div class="td"&gt;Unit Price&lt;/div&gt;
              &lt;div class="td"&gt;Quanity&lt;/div&gt;
              &lt;div class="td"&gt;Total Points&lt;/div&gt;
              &lt;div class="td"&gt;Temp&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="tr"&gt;
              &lt;div class="td"&gt;
                  &lt;span&gt;Serial Number&lt;/span&gt;
                  &lt;div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"&gt;
                      &lt;input maxlength="50" name="serialNo" id="serialNo" type="text"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>