如何僅將表格邊框應用於 colgroup？

Question

我有一個 HTML 表，它由 2 個colgroup組成，每個都有自己的“子”列。

如何僅對colgroup應用邊框？

這是我嘗試過的

 #table { border-collapse: collapse; } #tableCol1 { border-left: 20px solid green; background-color: red; }

 <table class="table table-striped" id="table"> <colgroup> <col span="1"> </colgroup> <colgroup> <col span="3" class="tableColGroup" id="tableCol1"> </colgroup> <colgroup> <col span="5" class="tableColGroup" id="tableCol2"> </colgroup> <thead> <tr> <th scope="colgroup" colspan="1"></th> <th scope="colgroup" colspan="3">Basic</th> <th scope="colgroup" colspan="5">Extra</th> </tr> <tr> <th scope="col">Day</th> <th scope="col">OH</th> <th scope="col">ENG</th> <th scope="col">TEK</th> <th scope="col">ATV</th> <th scope="col">BV</th> <th scope="col">100%</th> </tr> </thead> <tbody> <tr> <th scope="row">Mo.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">Tu.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">We.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table>

這是我正在尋找的結果

如您所見，綠色邊框也應用於各個單元格，我該如何解決？

Answer 1

你應該只 select colgroup 而不是 col：

通過 nth-child()

 #table { border-collapse: collapse; } colgroup:nth-child(2) {/*colgroup:nth-child(even) works also and can alternate if you have 4 and more colgroups*/ border-left: 20px solid green; background-color: red; }

 <table class="table table-striped" id="table"> <colgroup> <col span="1"> </colgroup> <colgroup> <col span="3" class="tableColGroup" id="tableCol1"> </colgroup> <colgroup> <col span="5" class="tableColGroup" id="tableCol2"> </colgroup> <thead> <tr> <th scope="colgroup" colspan="1"></th> <th scope="colgroup" colspan="3">Basic</th> <th scope="colgroup" colspan="5">Extra</th> </tr> <tr> <th scope="col">Day</th> <th scope="col">OH</th> <th scope="col">ENG</th> <th scope="col">TEK</th> <th scope="col">ATV</th> <th scope="col">BV</th> <th scope="col">100%</th> </tr> </thead> <tbody> <tr> <th scope="row">Mo.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">Tu.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">We.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table>

或將 ID 移至父級

 #table { border-collapse: collapse; } #tableCol1 { border-left: 20px solid green; background-color: red; }

 <table class="table table-striped" id="table"> <colgroup> <col span="1"> </colgroup> <colgroup id="tableCol1"> <col span="3" class="tableColGroup"> </colgroup> <colgroup> <col span="5" class="tableColGroup" id="tableCol2"> </colgroup> <thead> <tr> <th scope="colgroup" colspan="1"></th> <th scope="colgroup" colspan="3">Basic</th> <th scope="colgroup" colspan="5">Extra</th> </tr> <tr> <th scope="col">Day</th> <th scope="col">OH</th> <th scope="col">ENG</th> <th scope="col">TEK</th> <th scope="col">ATV</th> <th scope="col">BV</th> <th scope="col">100%</th> </tr> </thead> <tbody> <tr> <th scope="row">Mo.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">Tu.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">We.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table>

Answer 2

而不是使用border-left: 20px solid white; 只需使用border-left: 20px solid red; 並使第一個的邊界右綠色只需使用nth-of-type來定位每個tr的第一個孩子，如下面的例子

 #table { border-collapse: collapse; } #tableCol1 { border-left: 20px solid red; background-color: red; } tr th:nth-of-type(1){ border-right: 20px solid green; }

 <table class="table table-striped" id="table"> <colgroup> <col span="1"> </colgroup> <colgroup> <col span="3" class="tableColGroup" id="tableCol1"> </colgroup> <colgroup> <col span="5" class="tableColGroup" id="tableCol2"> </colgroup> <thead> <tr> <th scope="colgroup" colspan="1"></th> <th scope="colgroup" colspan="3">Basic</th> <th scope="colgroup" colspan="5">Extra</th> </tr> <tr> <th scope="col">Day</th> <th scope="col">OH</th> <th scope="col">ENG</th> <th scope="col">TEK</th> <th scope="col">ATV</th> <th scope="col">BV</th> <th scope="col">100%</th> </tr> </thead> <tbody> <tr> <th scope="row">Mo.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">Tu.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <th scope="row">We.</th> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table>