Html 如何将表格样式设置为容器的全宽并使单元格使用宽度的百分比？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4581005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I style table to be full width of container and make the cells use percentage of the width?
提问by Ahmad Fouad
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.
这是我的 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>
This is my CSS:
这是我的 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;
}
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.
我试图设置宽度：100%；但它返回了空格，但 TD 不平衡。我不知道如何使 TD 始终充满 100% 的空间。我试图为每个 TD 设置 width: 20% 因为它们是 5 tds 来接收 100% 宽度。但这没有用。有人可以告诉我如何使单元格适合表格 100% 的全宽（假设每个 TD 都有固定的宽度百分比，如 20%）。
回答by Chris Laplante
I think your problem is that you have display: blockoverriding the default display mode for the table (which is table). Remove that, and then try applying width: 100%to the table.
我认为您的问题是您display: block覆盖了表格的默认显示模式（即table）。删除它，然后尝试应用于width: 100%表。
