Html 表格行没有扩展到全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21715927/
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
Table row not expanding to full width
提问by Moussa Harajli
I have a table and when I set the table to a width of 100% and the table rows to a width pf 100% nothing happens or changes to the width.
我有一个表格，当我将表格设置为 100% 的宽度并将表格行设置为宽度 pf 100% 时，没有任何反应或宽度发生变化。
.Table-Normal {
position: relative;
display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
}
.Table-Normal thead tr {
background-color: #E74C3C;
font-weight: bold;
}
.Table-Normal tr {
margin: 0;
padding: 0;
border: 0;
border: 1px solid #999;
width: 100%;
}
.Table-Normal tr td {
margin: 0;
padding: 4px 8px;
border: 0;
border: 1px solid #999;
}
.Table-Normal tbody tr:nth-child(2) {
background-color: #EEE;
}<table id="top-leader" class="Table-Normal">
<thead>
<tr>
<td>Position</td>
<td>Name</td>
<td>Kills</td>
<td>Deaths</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>16 Kills</td>
<td>0 Deaths</td>
</tr>
<tr>
<td>2</td>
<td>John Smith</td>
<td>13 Kils</td>
<td>1 Death</td>
</tr>
<tr>
<td>3</td>
<td>Bob Smith</td>
<td>11 Kills</td>
<td>0 Deaths</td>
</tr>
</tbody>
</table>回答by JunM
回答by gsnedders
By specifying display: blockyou've overriding the default value from the browser stylesheet for the tableelement: display: table. Removing display: blockor replacing it with display: tablefixes this.
通过指定display: block您覆盖了浏览器样式表中table元素的默认值：display: table。删除display: block或替换它可以display: table解决这个问题。
