Html tbody 宽度不会自动扩展到表格的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11315913/
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
tbody width not automatically extending to width of table
提问by jeffkee
Take a look at this example here:
在这里看看这个例子：
And the red tables under "Specifications" is not becoming the full width of the containing it - when inspecting on Firebug, the div is not 220 pixels, but rather, just over a 100 pixels based on the content width.
并且“规格”下的红色表格并没有成为包含它的全宽 - 在 Firebug 上检查时，div 不是 220 像素，而是基于内容宽度超过 100 像素。
<div class="grid_4 alpha">
<table width="100%" class="grid_4 alpha omega">
<tr class="specrow">
<td class="specname">type:</td>
<td class="specvalue">House</td>
</tr>
<tr class="specrow">
<td class="specname">year:</td>
<td class="specvalue">1986</td>
</tr>
</table>
</div>
The CSS code looks like this:
CSS 代码如下所示：
#listing_specs table {
width: 100%;
}
#listing_specs table tbody {
display: table-row-group;
width: 100%;
}
.specrow {
margin:2px 0px;
border-bottom:1px dotted #dadada;
color: #fff;
width: 100%;
background-color: #A92229;
}
.specrow:hover {
background-color:#fff;
color:#333;
}
.specname{
font-weight: 600;
padding:2px 2px 2px 5px;
width: 50%;
white-space: nowrap;
}
.specvalue {
font-weight:normal;
padding:2px 5px 2px 5px;
text-align:left;
width: 50%;
}
I know there is a generic CSS resetter, and I think that's what's causing the problem. Unfortunately I can't go and just remove the reference to it because multiple sites refer to it from the same location at this moment, and I can't just make that change without careful review. So I need a way to override it on the stylesheet itself. The reset CSS being called is:
我知道有一个通用的 CSS 重置器，我认为这就是导致问题的原因。不幸的是，我无法删除对它的引用，因为此时有多个站点从同一位置引用它，而且我不能在没有仔细的情况下进行更改。所以我需要一种在样式表本身上覆盖它的方法。被调用的重置 CSS 是：
<link rel="stylesheet" type="text/css" media="all" href="http://demo.brixwork.com/master/css/reset.css" />
回答by Aatif Farooq
you should just add
你应该添加
display: table;
under this selector:
在这个选择器下：
#listing_specs table { }
回答by René
The table inherits display:inline;
该表继承了 display:inline;
It should be: display:table;
它应该是：显示：表；
The part cousing the display:inline is:
与 display:inline 相近的部分是：
.grid_1, .grid_2, .grid_3, .grid_4,
.grid_5, .grid_6, .grid_7, .grid_8,
.grid_9, .grid_10, .grid_11, .grid_12,
.grid_13, .grid_14, .grid_15, .grid_16 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
回答by Rostyslav Kulchytskyi
You can use this code
您可以使用此代码
tbody{
width: 100%;
display: table;
}
