テーブル内の表と枠を折りたたむ方法

Question

私は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>の内側に、外部テーブルとテーブルの間の境界線を折りたたむしたいと思います。 可能ですか？

その後、私は内部テーブルの境界を外部テーブルの別の色にしたいと思います。

Answer 1

あなたが見ているのは、内部の表のセルの罫線です。外枠ではありません。トリッキーなことは、あなたがそれらの細胞の境界線を完全に消したくないということです。なぜなら、それはスキューギワンパスに見えるからです。

が

.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/