Как стилизовать таблицу для полной ширины контейнера и использовать ячейки в процентах от ширины?

Question

Это мой html. Нижеследующая таблица находится внутри контейнера div с фиксированной шириной 670 пикселей. Теперь я не уверен, как приступить к тому, чтобы эта таблица захватила всю ширину контейнера.

<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> 

Это мой 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; 
} 

Я попытался установить ширина: 100%; но он возвратил пустые пространства, но TD не сбалансированы. Я не знаю, как сделать TD всегда полными 100% пространства. Я попытался установить ширину: 20% для каждого TD, так как они имеют 5 tds, чтобы получить 100% ширину. Но это не сработало. Может ли кто-нибудь сказать мне, как сделать ячейки пригодными для FUll ширины таблицы 100% (учитывая, что каждый TD имеет фиксированный процент ширины, например 20%).

Answer 1

Я думаю, ваша проблема в том, что у вас есть display: block, переопределяющий режим отображения по умолчанию для таблицы (table). Удалите это, а затем попробуйте применить width: 100% к таблице.