Question

我有如下表格，对于某些行，应用了noBorder类，它将为该行的顶部边框移动。即使我删除当前行的border-top，前一个（上面）行border-bottom也是可见的。所以基于class =＆＃34; noBorder＆＃34;标识符，我应该删除上面的行border-bottom。我怎么能做到这一点。该表将从后端动态生成。表生成后，我需要应用css样式2.1（而不是css3）进行表修改。

HTML：

＆＃13;

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

＆＃13;

<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>

＆＃13;

该表是动态的，具有类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");

根据html和css中的当前行删除上一行的表格边框

3 个答案: