如何折叠表格 HTML 中仅一行的边框

问题描述

我一直在尝试折叠表格最后两行的边框，但无法获得想要的结果，我已经尝试使用 border:hidden,border: 0,border-collapse: collapse。但似乎没有任何效果，我对此很陌生，如果你们对我有任何解决方案，我会很高兴。

这是我的 HTML 表格代码：

.stock-table {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.5%;
  font-size: 0.9em;
  min-width: 400px;
  border-radius: 10px 10px 0 0;
  border-collapse: separated;
  overflow: hidden;
  Box-shadow: 0 0 .25em .25em rgba(0,0.25);
}

.stock-table tr:last-child td:first-child {
  border-top-left-radius: 10px;
  border-right: hidden;
}

.stock-table tr:last-child td:last-child {
  border-top-right-radius: 10px;
}

.stock-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.directTR:nth-of-type(even) {
  background-color: #f3f3f3;
}

.stock-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.stock-table td {
  padding: 5px 15px;
}

.stock-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
  color: #ffffff;
}

<table class = "stock-table">
  <thead>
    <tr>
      <td> DRUG </td>
      <td> MEASURE </td>
      <td> AMOUNT </td>
      <td> COST </td>
      <td> TOTAL </td>
    </tr>
  </thead>
  <tbody>
    <c:forEach items = "${detailsList}" var = "detail">
      <tr class = "directTR">
        <td> ${detail.medicine_name} </td>
        <td> ${detail.medicine_measure} </td>
        <td> ${detail.amount} </td>
        <td> <span>$</span>${detail.price}</td>
        <td> <span>$</span>${detail.total}</td>
      </tr>
    </c:forEach>
    <tr class = "finalTR">
      <td>subTotal:</td>
      <td></td>
      <td></td>
      <td></td>
      <td><span>$</span>${subtotal}</td>
    </tr>
    <tr class = "finalTR">
      <td>Total (+IVA):</td>
      <td></td>
      <td></td>
      <td></td>
      <td><span>$</span>${total}</td>
    </tr>
  </tbody>
</table>

我要删除的边框是：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

border collapse html