首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何将表格样式化为容器的全宽,并使单元格使用宽度的百分比?

如何将表格样式化为容器的全宽,并使单元格使用宽度的百分比?
EN

Stack Overflow用户
提问于 2011-01-03 07:06:21
回答 1查看 104.6K关注 0票数 46

这是我的html。下表在一个固定宽度为670px的容器div中。现在我不确定如何继续让这个表捕获整个容器的宽度。

代码语言:javascript
复制
<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:

代码语言:javascript
复制
.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%;但返回空格,但TDs不平衡。我不知道如何使全港发展策略总是占满100%的空间。我试着为每个TD设置宽度: 20%,因为他们是5个TD来接收100%的宽度。但这并不管用。谁能告诉我如何使单元格适合表格的FUll宽度100% (给定每个TD有一个固定的宽度百分比,如20%)。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-01-03 07:19:27

我认为您的问题是让display: block覆盖了表的默认显示模式(即table)。删除它,然后尝试将width: 100%应用于该表。

票数 111
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4581005

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档