How can I style table to be full width of container and make the cells use percentage of the width?

Question

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.

<table class="table_fields">     <tr class="table_fields_top">         <td><?php _e('Published','news'); ?></td>         <td><?php _e('Story','news'); ?></td>         <td><?php _e('Views','news'); ?></td>         <td><?php _e('Comments','news'); ?></td>         <td><?php _e('Rating','news'); ?></td>     </tr> </table> 

This is my CSS:

.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; } 

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.

Answer 1

I think your problem is that you have display: block overriding the default display mode for the table (which is table). Remove that, and then try applying width: 100% to the table.