在这里看一下这个例子:
“规格”下的红色表格并没有成为包含它的完整宽度 - 在 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>
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%;
}
我知道有一个通用的 CSS 重置器,我认为这就是导致问题的原因。不幸的是,我不能删除对它的引用,因为此时多个站点从同一位置引用它,而且我不能在没有仔细审查的情况下进行更改。所以我需要一种方法来覆盖样式表本身。调用的重置 CSS 是:
<link rel="stylesheet" type="text/css" media="all" href="http://demo.brixwork.com/master/css/reset.css" />
你应该添加
display: table;
在此选择器下:
#listing_specs table { }
您可以使用此代码
tbody{
width: 100%;
display: table;
}
表格继承display:inline;
应该是:display:table;
与显示相关的部分:内联是:
.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;
}
此外,您还可以使用内联 CSS,如
style="display: table"
我正在使用这种格式,效果很好。