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

Question

我有一些样式double边界，而一些样式边界solid根据我的优先级要求。这些样式适用于我的表格中不同颜色的<td>边框。

这是一个示例表：

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>

我的问题是表格的底部边框没有完全显示。请注意，对于给定的<td>，我无法将样式从double更改为solid，因为我已经在将它们用于其他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来解决您的问题

参见小提琴：JSFiddle

Answer 2

添加以下 css

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

Answer 3

这是纯粹CSS解决方案。不确定它是否适用于所有情况，因为在其他具有solid边界的<td>中具有优先权，但直到现在还没有找到任何此类情况。

td[rowspan]:not([rowspan="1"]) {
border-bottom-style: solid;
}