HTMLテーブル内のいくつかの罫線を削除します

Question

私はHTMLで表を作成していますが、私は単純なことに問題があるので非常に驚いています。 はここcodePenの例です：

http://codepen.io/Loreno/pen/PpNwPy?editors=1000

例の一部の行がクラスhideTopBorderを持っています。このクラスは、次のようになります。

私はボーダーが消えてしまいますが、まだそこにいると思います。また、このクラスを行内のセルに追加しようとしましたが、それでも動作しません。 そんな単純なことだと思うけど、私にとってはかなり難しいと分かった。

Answer 1

希望の効果を得るには、tdに適用し、下の境界も削除する必要があります。あなたのplunkerを編集するつもりはないしていると、それはもはやあなたの質問に関連するコードが含まれます

.tg { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 100%; 
 
} 
 

 
.tg td { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 14px; 
 
    padding: 10px 5px; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    overflow: hidden; 
 
    word-break: normal; 
 
} 
 

 
.tg th { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    padding: 10px 5px; 
 
    border-style: solid; 
 
    border-width: 2px; 
 
    overflow: hidden; 
 
    word-break: normal; 
 
} 
 

 
.tg .tg-yw4l { 
 
    vertical-align: top 
 
} 
 

 
.width-25 { 
 
    width: 25%; 
 
} 
 

 
.hideTopBorder td { 
 
    border-top: none; 
 
    border-bottom: none; 
 
}

<div id="report-div"> 
 
    <table class="tg"> 
 
    <tr> 
 
     <th class="tg-yw4l" colspan="4">TEST DATA</th> 
 
    </tr> 
 
    <tr> 
 
     <td class="tg-yw4l" colspan="4">DESCRIPTION</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="tg-yw4l" style="width: 50%;" colspan="2">Customer </td> 
 
     <td class="tg-yw4l" style="width: 50%;" colspan="2">Analyze</td> 
 
    </tr> 
 
    <tr class="hideTopBorder"> 
 
     <td class="hideTopBorder tg-yw4l width-25">Name:</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Owner:</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
    </tr> 
 
    <tr class="hideTopBorder"> 
 
     <td class="tg-yw4l width-25 hideTopBorder">contact:</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Type:</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
    </tr> 
 
    <tr class="hideTopBorder"> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Phone number:</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Model</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
    </tr> 
 
    <tr class="hideTopBorder"> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Mail</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Location</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
    </tr> 
 
    <tr class="hideTopBorder"> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Contact</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
     <td class="tg-yw4l width-25 hideTopBorder">number:</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
    </tr> 
 
    <tr class="hideTopBorder"> 
 
     <td class="tg-yw4l width-25 hideTopBorder">Site</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
     <td class="tg-yw4l width-25 hideTopBorder">board:</td> 
 
     <td class="tg-yw4l width-25 hideTopBorder"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="tg-yw4l" colspan="4">SOMETHING</td> 
 
    </tr> 
 
    </table> 
 
</div>