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

前端之家收集整理的这篇文章主要介绍了css – 如何将表格的宽度设置为容器的宽度,使单元格使用宽度的百分比?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的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%的宽度。但这没有办法。有人可以告诉我如何使细胞适应表100的FUll宽度(给定每个TD具有20%的固定百分比宽度)。

解决方法

我想你的问题是你有显示:块覆盖表的默认显示模式(这是表)。删除,然后尝试将宽度:100%应用于表。

猜你在找的CSS相关文章