Question

这是我的HTML。下表位于容器div内，其固定宽度为670px。现在我不知道如何让这个表捕获容器的整个宽度。

<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％的空间。我尝试设置宽度：每个TD为20％，因为它们是5 tds以获得100％宽度。但这没效果。有人可以告诉我如何使单元格适合表格的FUll宽度100％（假设每个TD有一个固定的宽度百分比，如20％）请。

Answer 1

我认为你的问题是你display: block覆盖了表的默认显示模式（table）。删除它，然后尝试将width: 100%应用于表格。

如何将表格设置为容器的整个宽度并使单元格使用宽度的百分比？

1 个答案: