根据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");