title: How can I style table to be full width of container and make the cells use percentage of the width?
body: <p>This is my html. The table below is inside a container div which has fixed width of 670px. Now I am not sure how to proceed to make this table capture the full width of container.</p>
  
  <pre><code>&lt;table class="table_fields"&gt;
      &lt;tr class="table_fields_top"&gt;
          &lt;td&gt;&lt;?php _e('Published','news'); ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php _e('Story','news'); ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php _e('Views','news'); ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php _e('Comments','news'); ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php _e('Rating','news'); ?&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This is my CSS:</p>
  
  <pre><code>.table_fields {
      display: block;
      background: #fff;
      border: 1px solid #dce1e9;
      border-bottom: 0;
      border-spacing: 0;
  }
  
  .table_fields .table_fields_top {background: #f1f3f6;}
  .table_fields .table_fields_top td{
      font-size: 10px;
      text-transform: uppercase;
  }
  
  .table_fields td {
      text-align: center;
      border-bottom: 1px solid #dce1e9;
      border-right: 1px solid #dce1e9;
      font-size: 11px;
      line-height: 16px;
      color: #666;
      white-space:nowrap;
  }
  </code></pre>
  
  <p>I tried to set width: 100%; but it returned empty spaces but the TDs are not balanced. I do not know how to make the TDs always full 100% of the space. I tried to set width: 20% for each TD since they are 5 tds to receive 100% width. But this didn't work. Can someone tell me how to make the cells fit in the FUll width of table 100% (given each TD has a fixed percentage of width like 20%) please.</p>