一个页面上,有两种不同边框的table,这里抽象为GreenTable和RedTable
想让不同边框的table进行嵌套。
HTML页面为:
<table class="greentable">
<tr>
<td>我是</td>
<td>GreenTable</td>
</tr>
</table>
<table class="redtable">
<tr>
<td>我是</td>
<td>RedTable</td>
</tr>
<tr>
<td colspan="2">
<table class="greentable">
<tr>
<td>我是RedTable内的GreenTable</td>
</tr>
</table>
</td>
</tr>
</table>
当CSS样式如下时(先定义外部table,后定义内部table):显示正常
.greentable
{
border-collapse:collapse;
}
.redtable
{
border-collapse:collapse;
}
.redtable td
{
border:solid 1px red;
}
.greentable td
{
border:solid 1px green;
}
但是,当CSS样式如下时(先定义内部table,后定义外部table):显示就不正常了
.greentable
{
border-collapse:collapse;
}
.redtable
{
border-collapse:collapse;
}
.greentable td
{
border:solid 1px green;
}
.redtable td
{
border:solid 1px red;
}
即使内部table的class是greentable,但是它始终以后定义的样式为准。
怎样才能忽略样式的定义顺序,始终以其引用的class来显示?
给greentable的td再加个class
.greentable
{
border-collapse: collapse;
}
.redtable
{
border-collapse: collapse;
}
.greentable td.greentd
{
border: solid 1px green;
}
.redtable td
{
border: solid 1px red;
}
不知yeah~
不明白为什么要这么做?redtable 和 redtable td 本来就是一个表格应用的,为什么要分开呢?对于CSS管理也不方便啊~
看看是不是样式的优先级问题,用firefox中的firebug调试一下看看!