根據html和css中的當前行刪除上一行的表格邊框

Question

我有如下的表格，對於某些行，應用noBorder類，它將聳掛那個行的上邊框。即使我刪除當前行的邊框頂部，前面（上面）的行邊框是可見的。所以基於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只有一個邊框，例如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。如果有，請將其他一些css類（可能爲.noBottomBorder）添加到之前的td，以刪除底部邊框。

爲了讓你運行孩子：

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