如何制作具有不同边框的嵌套表,使其不会从主表继承

问题描述

现在有了这个代码,我在主表和嵌套表的两个表中都有一个虚线和黑色边框。 但是,我希望它是嵌套表的实心和白色边框,而不是从主表继承虚线和黑色边框。知道怎么做吗?

<table class="outer-table";>
<tr><td colspan="2"></td><td></td></tr>
<tr><td></td><td><table id="inner-table";>
                <tr><td></td><td></td></tr>
                <tr><td></td><td></td></tr>
                </table>
        </td><td rowspan="2"></td></tr>
<tr><td></td><td></td></tr>
</table>

table.outer-table,td{ border: 5px dashed black;}
table.outer-table{ 
    border-collapse: collapse;
    background-color:red; 
    width:40%;
    height:60%;
 }

table#inner-table{
  margin-left: auto;
  margin-right: auto;
background-color:yellow;
     border: 3px solid white; 
     width:90%;
     height:90%;
}

解决方法

将以下 CSS 属性添加到您的 inner-tabletd 元素,这将覆盖 #outer-tabletd 样式:

table#inner-table td {
 border: 3px solid white;
}