html 表格嵌套表格怎么实现细边框?

Question

如题，用了表格嵌套，边框重叠变粗，试过网上的方法，合并表格边框，内表格border设置为0

table {
            border-collapse: collapse;
            border-spacing: 0;            
        }

结果： 内表格边框为0，就只显示外表格边框；
样式需要外表格的奇数行有背景色，CSS选择器用了 #外表格> tr 这个不起作用，这是为什么呢？
最后解决不了只好把外层table改成div,但还是知道要怎么处理，求指教求喷

Answer 1

简单的写了一个demo

css选择器中 “>” 是 “父元素 > 子元素”

<table class="demo">
 <tbody>
  <tr>
   <td>
    <table>
     <tbody>
      <tr>
       <td>
        内嵌表格
       </td>
        <td>
        内嵌表格
       </td>
      </tr>
         <tr>
       <td>
        内嵌表格
       </td>
        <td>
        内嵌表格
       </td>
      </tr>
     </tbody>
    </table>
   </td>
   <td>单元格</td>
  </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
     </tr>
     <tr>
        <td>单元格</td>
        <td>单元格</td>
     </tr>
 </tbody>
</table>

table {
    border-collapse:collapse;
    border-spacing:0px;
}
.demo{
    border: 1px solid red;
}
td {
    padding: 0;
}
.demo td{
    border-left: 1px solid green;
    border-top: 1px solid green;
}
.demo table tr:first-child td{
    border-top:none;
}
.demo table tr td:first-child{
    border-left:none;
}

.demo > tbody tr:nth-child(odd) {
    background: lightgray;
}

Answer 2

CSS选择器用了 #外表格> tr 这个不起作用

关于这个，你审查元素就会发现，tr其实不是table的儿子，而是孙子。

真正的关系是table>(thead/tfoot/tbody)>tr>td