HTML 表格 td 左边框颜色不随 rowspan 更新

Question

我有带 rowspan 的 HTML 表格，我想 td 使用不同的左边框颜色

HTML Code;

<table class="table">
  <tr>
    <td class ="fail-td" rowspan="2">Detail</td>
    <td class ="fail-td">Data 1</td>
    <td class="event">Event</td>
  </tr>
  <tr> <td  class ="success-td">Data 2</td></tr>

</table> 


Snippet:



.fail-td {
    border-left: 4px solid #d9534f  !important;
}
.success-td {
    border-left: 4px solid #5cb85c !important;
}

预期输出为 rowspan 第二行 td 左边框为绿色 但结果是 td 左边框为红色

Answer 1

设置 fail-td class name of second td of data 1 value

.fail-td {
  border-left: 4px solid #d9534f !important;
}

.success-td {
  border-left: 4px solid #5cb85c !important;
}

<table class="table">
  <tr>
    <td class="fail-td" rowspan="2">Detail</td>
    <td class="fail-td">Data 1</td>
    <td class="event">Event</td>
  </tr>
  <tr>
    <td class="success-td">Data 2</td>
  </tr>

</table>