如何将表格样式设置为容器的全宽,并使单元格使用宽度的百分比? [英] How can I style table to be full width of container and make the cells use percentage of the width?
问题描述
这是我的html。下面的表是一个容器div,它的宽度固定为670px。现在我不知道如何继续使此表捕获容器的整个宽度。
This is my html. The table below is inside a container div which has fixed width of 670px. Now I am not sure how to proceed to make this table capture the full width of container.
<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%)。
I tried to set width: 100%; but it returned empty spaces but the TDs are not balanced. I do not know how to make the TDs always full 100% of the space. I tried to set width: 20% for each TD since they are 5 tds to receive 100% width. But this didn't work. Can someone tell me how to make the cells fit in the FUll width of table 100% (given each TD has a fixed percentage of width like 20%) please.
推荐答案
我想你的问题是你有 display:block
覆盖表的默认显示模式表)。删除它,然后尝试将 width:100%
应用到表中。
I think your problem is that you have display: block
overriding the default display mode for the table (which is table
). Remove that, and then try applying width: 100%
to the table.
这篇关于如何将表格样式设置为容器的全宽,并使单元格使用宽度的百分比?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!