title: Dynamic width on table child
body: <p>I had a problem making an responsive width of element that attributed with <code>display:table-cell</code> or element <code>&lt;td&gt;</code> itself, i have a parent element <code>&lt;div class="parent"&gt;</code> with few child written below</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="child"&gt;&lt;/div&gt;
      &lt;div class="child"&gt;&lt;/div&gt;
      &lt;div class="child"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And written few lines of css codes like below</p>
  
  <pre><code>.parent {
      display: table;
      width: 100%;
      border-collapse: collapse;
  }
  .parent .child {
      display: table-cell;
      width : 100%;
      padding: 5px;
  }
  </code></pre>
  
  <p>The problem is, the first child will have 100% of parent width, which the other two got 0% width, i try to devide and change the css codes like this</p>
  
  <pre><code>.parent .child {
      display: table-cell;
      width : 33%;
      padding: 5px;
  }
  </code></pre>
  
  <p>It did work fine, but the things that i really want is to devide the width of the parent dinamicly, depending of the amount of the child, i mean it's not staticly like that, sometimes 3 sometimes 5 and etc.</p>
  
  <p>Maybe i can count the amount of the child using js <code>elementParent.childElementCount</code> and devide the 100% by the amount of the child to give into each other child width using JavaScript, but how if i only using css?</p>
  
  <p>Thanks for any correction.</p>