htmlとcssの現在の行に基づいて前の行の表の枠を削除します

Question

次のような表があり、noBorderが適用される特定の行のクラスでは、その行の上の枠がromoveされます。現在の行のborder-topを削除しても、前の（上の）行border-bottomが表示されます。したがって、class = "noBorder"識別子に基づいて、上の行のborder-bottomを削除する必要があります。どのように私はそれを達成することができます。表はバックエンドから動的に生成されます。テーブルの生成後、私はテーブルの変更にCSSスタイル2.1（css3ではなく）を適用する必要があります。

HTML：

.table-content > th, 
 
.table-content td { 
 
    border: black solid thin; 
 
} 
 

 
tr.noBorder td { 
 
    border-top: none; 
 
}

<table style="width:100%" class="table-content table-content4td lineHeight table-hideColumn3Border"> 
 
    <tr class="table-th-color"> 
 
    <td style="width: 5%" class="textAlignLeft">No.</td> 
 
    <td style="width: 60%" class="textAlignLeft">Description</td> 
 
    <td style="width: 20%" class="textAlignLeft"></td> 
 
    <td style="width: 15%" class="textAlignLeft">Value</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>Row 1</td> 
 
    <td></td> 
 
    <td>value</td> 
 
    </tr> 
 
    <tr class="noBorder"> 
 
    <td></td> 
 
    <td>Test1</td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>2</td> 
 
    <td>Row2</td> 
 
    <td></td> 
 
    <td>Value</td> 
 
    </tr> 
 
    <tr class="noBorder"> 
 
    <td></td> 
 
    <td>Test2</td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>3</td> 
 
    <td>Row 3</td> 
 
    <td></td> 
 
    <td>Value</td> 
 
    </tr> 
 
    <tr> 
 
    <td>4</td> 
 
    <td>Row 4</td> 
 
    <td></td> 
 
    <td>Value</td> 
 
    </tr> 
 
    <tr class="noBorder"> 
 
    <td></td> 
 
    <td>Test 4</td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>5</td> 
 
    <td>Row 5</td> 
 
    <td></td> 
 
    <td>Value</td> 
 
    </tr> 
 
</table>

テーブルが動的、いつかのみ追加されるクラスnoBorderを有する行です。だから、その行だけが存在する場合、私は上の行の現在の行と下の境界線の上の境界線を削除する必要があり、そうでなければ境界線を削除する必要はありません。

Answer 1

クイックフィックス：下境界線を持つべきではない行にnoBorderクラスを追加します。その後

tr.noBorder td { 
    border-bottom: none; 
} 

tr.noBorder + tr td { 
    border-top: none; 
} 

例えば、あなたはまたborder-collapse: collapse;を使用することができるかもしれないが、それはあなたのために他の問題を引き起こす場合、それは明らかではありません必要な

として調整左と右のボーダーで。

Answer 2

より良い方法は、テーブルセルtdには1つの境界線しか持たないようにすることです（例：border-top）。

最後の子のクラスを追加する:nth-last-child(1)にはborder-bottomが含まれています。

DEMO

.table-content td { 
    border-top: black solid thin; 
} 

.table-content tr:nth-last-child(1) td { 
    border-bottom: black solid thin; 
} 

tr.noBorder td { 
    border-top: none; 
} 

Answer 3

あなたはそれを行うことができ、いくつかのJavaScriptを使用しています。

すべてのテーブルのtd子配列を取得し、その配列を通り、クラスがnoBorderであるかどうかを確認します。存在する場合は、下の境界線を削除する前のtdに他のCSSクラス（.noBottomBorder）を追加します。

は、実行の子供を取得するには：だけCSSで

var tds = document.getElementById("mytableid").getElementsByTagName("td");