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

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%;но он возвратил пустые места, но ТД не сбалансированы.Я не знаю, как заставить ТД всегда заполнять 100% пространства.Я попытался установить ширину: 20% для каждого TD, поскольку они составляют 5 тд, чтобы получить 100% ширину.Но это не сработало.Может кто-нибудь сказать мне, как сделать так, чтобы ячейки помещались в полную ширину таблицы на 100% (учитывая, что каждый TD имеет фиксированный процент ширины, например, 20%), пожалуйста.

Answer 1

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