如何摺疊邊框到表格內的表格

我有一個像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） –

如何摺疊邊框到表格內的表格

回答

相關問題