テーブルの特定の行に罫線を隠す、HTML CSS

Question

私はこの表の特定の行の境界線を取り除こうとしています。私は男性とブランドのArmadaのために行の周りに境界線が欲しいが、中間のボトラーラインは持たないようにしたい。何らかの理由で私は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から削除するだけでは不十分です。あなたは、あなたがこのようなあなたのCSSを調整することができるth/tdからそれを除去することも必要があります。

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>