Html 如何将表格设置为容器的全宽,并使单元格使用宽度的百分比?

Html 如何将表格设置为容器的全宽,并使单元格使用宽度的百分比?,html,css,html-table,Html,Css,Html Table,这是我的html。下表位于固定宽度为670px的容器div内。现在我不知道如何继续使这个表捕获容器的全宽 <table class="table_fields"> <tr class="table_fields_top"> <td><?php _e('Published','news'); ?></td> <td><?php _e('Story','news'); ?>&l

这是我的html。下表位于固定宽度为670px的容器div内。现在我不知道如何继续使这个表捕获容器的全宽

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

我试图设置宽度:100%;但它返回了空空间,但TDs不平衡。我不知道如何使TDs始终占据100%的空间。我尝试设置宽度:每个TD 20%,因为它们是5个tds,可以接收100%的宽度。但这不起作用。有人能告诉我如何使单元格适合表格100%的全宽(假设每个TD都有一个固定的宽度百分比,比如20%)吗?

我想你的问题是你有
显示:块
覆盖了表格的默认显示模式(即
表格
)。删除它,然后尝试对表应用
width:100%

Bootstrap也可以代替width:100%样式(即class=“col-xs-12”)我不同意上面的说法,因为保持显示原样就可以了,但是在使用表{width:100%}时,还应该包括tr、tbody、thead,比如这个表、thead、tbody、tr{width:100%}这同样可以很好地工作
.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;
}