CSS：当设置为tbody / thead时，渐变会在Chrome中重复出现
||
这里显示我遇到的问题。基本上，当我在thead上放置一个渐变时，Chrome会对每个单元重复该渐变...实际所需的结果是firefox生成的内容-整个thead的实心渐变。
有想法该怎么解决这个吗？
这是我的CSS：
thead.header {
font-weight: bold;
border-bottom: 1px solid #9C9C9C;
background-repeat: no-repeat;
background: #C6C6C6;
background: -moz-linear-gradient(top, #DEDEDE 0%, #BDBDBD 80%, #BBB 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DEDEDE), color-stop(80%,#BDBDBD), color-stop(100%,#BBB));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#DEDEDE\', endColorstr=\'#BBB\',GradientType=0 );
}
<table style=\"width:100%\" cellpadding=\"0\" cellspacing=\"0\">
<thead class=\"header\">
<tr>
<th width=\"200px\">Actor</th>
<th rowspan=\"3\">Character</th>
</tr>
<tr>
<th>Gender</th>
</tr>
<tr>
<th>Age</th>
</tr>
</thead>
<tbody class=\"odd\">
<tr>
<td width=\"200px\">Test</td>
<td rowspan=\"3\">Test</table>
</td>
</tr>
<tr>
<td>Male</td>
</tr>
<tr>
<td>25</td>
</tr>
</tbody>
</table>
没有找到相关结果
已邀请:
7 个回复
痰嫉
，它将正常工作抢垢洛韧
鞘垒飘
样式无法应用于元素。抵浮细
元素而不是并使用属性选择器似乎可行。如果两个标题行的高度是灵活的，那将无法很好地工作，因为您需要在示例中知道中间范围颜色“ 9”。查看示例http://jsfiddle.net/wSWF9/2/table { border: 1px solid #ccc; border-collapse: collapse; } table thead th[rowspan=\"2\"] { background-image: linear-gradient(to bottom, #ccc, #333); background-image: -webkit-linear-gradient(top, #ccc, #333); background-repeat: repeat-x; } table thead tr th { background-image: linear-gradient(to bottom, #ccc, #7E7E7E); background-repeat: repeat-x; } table thead tr + tr th { background-image: linear-gradient(to bottom, #7E7E7E, #333); background-repeat: repeat-x; }骂狮淋唐便
内容。 http://jsfiddle.net/4vnpC/览幕堤分
。 我意识到这不是一个很好的解决方法。 您的代码：http：//jsbin.com/ozuhi5 带有修复程序的代码：http://jsbin.com/ozuhi5/2 新的：<thead class=\"header\"> <tr> <th width=\"200\"> Actor<br /> Gender<br /> Age </th> <th>Character</th> </tr> </thead>嘘崇蔡对
table>tbody { background-image: -moz-linear-gradient(270deg, black, white); /* keep the right code for other browsers */ background-image: -ms-linear-gradient(270deg, black, white); background-image: -o-linear-gradient(270deg, black, white); background-image: linear-gradient(to bottom, black, white); background-color: transparent; /* needed for chrome*/ background-image:-webkit-linear-gradient(0deg, rgba(0,0,0,0),rgba(0,0,0,0)); /*del the linear-gradient on google chrome */ } table { /*fix tbody issues on google chrome engine*/ background-image: -webkit-linear-gradient(270deg, rgba(0,0,0,0) 39px, black 0px,white ); /* 359px is the calculated height of the thead elemx */ border-spacing: 0; /*delete border spacing */ }