如何折叠边框到表格内的表格

我有一个像this这样的html结构，我找不出如何解决这个问题。如何折叠边框到表格内的表格

<table border="0" cellspacing="0" cellpadding="0" align="center" width="200px" class="external"> 
    <tr> 
     <th>Firstname</th> 
     <th>Lastname</th> 
    </tr> 
    <tr> 
     <td>Peter</td> 
     <td>Griffin</td> 
    </tr> 
    <tr> 
     <td>Lois</td> 
     <td> 
      <table border="0" cellspacing="0" cellpadding="0" align="center" width="100%" class="internal"> 
       <tr> 
        <th>Firstname</th> 
        <th>Lastname</th> 
       </tr> 
       <tr> 
        <td>Peter</td> 
        <td>Griffin</td> 
       </tr> 
       <tr> 
        <td>Lois</td> 
        <td>Griffin</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table>

我想折叠外部表和<td>内表之间的边界。这可能吗？

之后，我想用外部表的另一种颜色的内部表的边界。

来源

2016-09-15 gix_lg

这是你想要做的吗？ http://codepen.io/anon/pen/dprxqk –

或多或少是的。但我想删除双边框并只保留绿色边框。谢谢。 –

是这种吗？ http://codepen.io/anon/pen/jrrPmE –

你所看到的是内部表中单元格的边界，而不是外部边界。棘手的是，你不想完全关闭这些细胞的边界，因为那样它会看起来skoogiwampus。

尝试

.internal { 
    border: none; 
} 
.internal td, 
.internal th { 
    border-color: yellow; 
} 
.internal tr:first-child th { 
    border-top: none; 
} 
.internal tr:last-child td { 
    border-bottom: none; 
} 
.internal tr td:first-child, 
.internal tr th:first-child { 
    border-left: none; 
} 
.internal tr td:last-child, 
.internal tr th:last-child { 
    border-right: none; 
}

它使用伪选择只处理您需要关闭边界。它很冗长，但它会做你需要的。

https://jsfiddle.net/aff19ahg/3/

来源

2016-09-15 21:24:13 OneHoopyFrood

谢谢。这与我想要的相似。但是我想让内部桌子的所有边框都是黄色的，即使是桌子边框本身也是如此。像这样：[link]（http://imgur.com/a/OIpBV） –

如何折叠边框到表格内的表格

回答

相关问题