html - 当最后一行和前一行的单元格具有 rowspan 和不同的边框颜色时，底部表格边框不显示

Question

我有一些样式的边框 double , 而一些边框样式 solid根据我的优先要求。这些样式适用于 <td> 的不同颜色边框在我的 table 上。

这是一个示例表:

table {
  border-collapse: collapse;
  width: 100%;
  border-bottom: 1px double #000;
}

td {
  border: 1px double #dddddd;
  text-align: left;
  padding: 8px;
}

tr:first-child td {
  border-top: none;
}

tr:last-child td {
  border-bottom: none;
}

td:first-child {
  border-left: none;
}

td:last-child {
  border-right: none;
}

<table>
  <tr>
    <td>1</td>
    <td rowspan="2">2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

我的问题是表格的底部边框没有完全显示。请注意，我无法更改 double 的样式至 solid对于给定 <td>因为我已经将它们用于其他 td类(见编辑)。

编辑

rowspan可以是任意数字。

这是完整的 SCSS文件:

$dark-black-grey: #212121;
$black-grey: #616161;
$dark-grey: #bdbdbd;
$medium-grey: #e0e0e0;
$light-grey: #eeeeee;
$blue-grey: #b0bec5;
$light-blue-grey: #cfd8dc;
$white-grey: #fafafa;
$blue: #64b5f6;
$light-blue: #90caf9;
$white-blue: #bbdefb;
$green: #81c784;
$red: #e57373;
$light-red: #ef9a9a;
$white-red: #ffcdd2;
$light-yellow: #fffde7;
$font-size: 14px;
$header-height: 30px;
#data-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 4fr;
  div {
    height: 100vh;
    &:not(:last-child) {
      border-right: 1px double $dark-grey;
    }
    div.table-wrapper {
      height: calc(100% - #{$header-height});
      overflow-x: hidden;
      overflow-y: auto;
      table {
        width: 100%;
        border-bottom: 1px double $dark-grey;
        tr {
          &:first-child {
            td {
              border-top: 0;
            }
          }
          &:last-child {
            td {
              border-bottom: 0;
            }
          }
          td {
            border: 1px double $light-grey;
            padding: 4px 8px;
            &:first-child {
              border-left: 0;
            }
            &:last-child {
              border-right: 0;
            }
            &.fade {
              color: $black-grey;
            }
            &.footer {
              text-align: right;
              font-weight: 500;
            }
            &:not(.warning):not(.info) {
              &.computed {
                background-color: $light-yellow;
              }
              &.optional {
                background-color: #ffeeff;
              }
              &.input-box {
                background-color: $white-grey;
                &:hover {
                  background-color: $light-grey
                }
              }
            }
            &.warning {
              background-color: $light-red;
              input {
                background-color: $light-red;
              }
              &:not(.button) {
                border-style: solid;
                border-color: $light-red;
              }
              &.button {
                background-color: $white-grey;
                &:hover {
                  background-color: $white-red;
                  border-style: solid;
                  border-color: $white-red;
                }
                &:active {
                  background-color: $light-red;
                  border-style: solid;
                  border-color: $light-red;
                }
              }
            }
            &.info {
              background-color: $light-blue;
              input {
                background-color: $light-blue;
              }
              &:not(.button) {
                border-style: solid;
                border-color: $light-blue;
              }
              &.button {
                text-align: center;
                font-weight: 500;
                background-color: $white-grey;
                &:hover {
                  background-color: $white-blue;
                  border-style: solid;
                  border-color: $white-blue;
                }
                &:active {
                  background-color: $light-blue;
                  border-style: solid;
                  border-color: $light-blue;
                }
              }
            }
            &.button {
              cursor: pointer;
              padding: 4px;
            }
          }
        }
      }
    }
    table {
      border-collapse: collapse;
      &.popup {
        position: absolute;
        box-shadow: 2px 2px 4px 1px $black-grey;
        td {
          background-color: white;
          padding: 4px 8px;
          cursor: pointer;
          &:hover {
            background-color: $light-grey;
          }
          &:active {
            background-color: $medium-grey;
          }
        }
      }
      &.header {
        width: 100%;
        border-bottom: 1px double $dark-grey;
        height: $header-height;
        tr td {
          text-align: center;
          font-weight: 500;
          padding: 0 4px;
          &.fade {
            color: $black-grey;
          }
          &.button {
            cursor: pointer;
            &:hover:not(:active) {
              background-color: $light-grey;
            }
            &:active {
              background-color: $medium-grey;
            }
          }
        }
      }
    }
  }
}
svg {
  display: block;
  margin: auto;
  width: $font-size;
  height: $font-size;
}
input {
  border: none;
  padding: 0;
  width: 100%;
  &:hover {
    box-shadow: 0 0 1px 1px $blue
  }
  &:focus {
    outline: none;
    box-shadow: 0 0 1px 1px $green;
    &.invalid {
      box-shadow: 0 0 1px 1px $red
    }
  }
}
td.shrink {
  width: 1%;
  white-space: nowrap;
}

Answer 1

这有帮助吗？

table {
  border-collapse: collapse;
  width: 100%;
  border-bottom: 1px double #000;
}

td {
  border: 1px double #dddddd;
  text-align: left;
  padding: 8px;
}

tr:first-child td {
  border-top: none;
}

tr:last-child td {
  border-bottom: none;
}

td:first-child {
  border-left: none;
}

td:last-child {
  border-right: none;
}

td[rowspan="2"] {
  border-bottom: 1px double #000;
}

<table>
  <tr>
    <td>1</td>
    <td rowspan="2">2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
  </tr>
</table>

请注意:如果这对您没有帮助，我们还需要您提供 2 样东西。

• 所有您的CSS/HTML 代码，而不仅仅是一个片段
• 了解您是否愿意使用 JavaScript 或 JQuery 来解决您的问题

参见 fiddle :JSFiddle