隱藏表格，HTML的特定行的邊框CSS

Question

我試圖擺脫此表上特定行中的邊框。我想要男士和品牌Armada的行周圍的邊框，但沒有中間botder行。出於某種原因，我無法使用tr類來擺脫它。我在做什麼錯誤？

table, 
 
tr, 
 
td, 
 
th { 
 
    border: 1px solid; 
 
    border-collapse: collapse; 
 
} 
 

 
.noBorder { 
 
    border: 0; 
 
}

<table> 
 
    <tr class="noBorder"> 
 
    <th>Men</th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <th>Brand</th> 
 
    <th>Model</th> 
 
    <th>Waist</th> 
 
    <th>Lengths</th> 
 
    <th>Quick Description </th> 
 
    </tr> 
 
    <tr class="noBorder"> 
 
    <th>Armada</th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <td>Armada</td> 
 
    <td>Tracer 88</td> 
 
    <td>88</td> 
 
    <td>162, 172</td> 
 
    <td>Cut with an 88mm waist width and Armada s snow-shedding Tapertop topsheet to minimize added weight from snow buildup, the Armada Tracer 88 Skis travel swiftly and efficiently uphill while the EST All-Mtn Rocker provides versatile performance on the 
 
     journey down.</td> 
 
    </tr>

Answer 1

你申請邊境tr和th/td。因此從tr中刪除邊界是不夠的。你也需要從th/td刪除它，所以你可以調整你的CSS是這樣的：

table, 
 
tr, 
 
td, 
 
th { 
 
    border: 1px solid; 
 
    border-collapse: collapse; 
 
} 
 

 
.noBorder { 
 
    border: 0; 
 
} 
 

 
.noBorder th, 
 
.noBorder td { 
 
    border: 0; 
 
}

<table> 
 
    <tr class="noBorder"> 
 
    <th>Men</th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <th>Brand</th> 
 
    <th>Model</th> 
 
    <th>Waist</th> 
 
    <th>Lengths</th> 
 
    <th>Quick Description </th> 
 
    </tr> 
 
    <tr class="noBorder"> 
 
    <th>Armada</th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    <th></th> 
 
    </tr> 
 
    <tr> 
 
    <td>Armada</td> 
 
    <td>Tracer 88</td> 
 
    <td>88</td> 
 
    <td>162, 172</td> 
 
    <td>Cut with an 88mm waist width and Armada s snow-shedding Tapertop topsheet to minimize added weight from snow buildup, the Armada Tracer 88 Skis travel swiftly and efficiently uphill while the EST All-Mtn Rocker provides versatile performance on the 
 
     journey down.</td> 
 
    </tr>

另一個解決方案是使用colspan避免增加空細胞：

table, 
 
tr, 
 
td, 
 
th { 
 
    border: 1px solid; 
 
    border-collapse: collapse; 
 
} 
 

 
.noBorder { 
 
    border: 0; 
 
}

<table> 
 
    <tr class="noBorder"> 
 
    <th colspan=5>Men</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Brand</th> 
 
    <th>Model</th> 
 
    <th>Waist</th> 
 
    <th>Lengths</th> 
 
    <th>Quick Description </th> 
 
    </tr> 
 
    <tr class="noBorder"> 
 
    <th colspan=5>Armada</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Armada</td> 
 
    <td>Tracer 88</td> 
 
    <td>88</td> 
 
    <td>162, 172</td> 
 
    <td>Cut with an 88mm waist width and Armada s snow-shedding Tapertop topsheet to minimize added weight from snow buildup, the Armada Tracer 88 Skis travel swiftly and efficiently uphill while the EST All-Mtn Rocker provides versatile performance on the 
 
     journey down.</td> 
 
    </tr>