HTML表格td边框左侧颜色不随行跨度更新

我有一个带有rowspan的HTML表，我想用不同的boarder左颜色创建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;
}

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

设置数据1值的第二个td的失败td类名

.运输署署长{ 左边框：4px实心d9534f！重要； } .成功td{ 左边框：4px实心5cb85c！重要； } 细节 数据1 事件 数据2

---

已经设置了类数据2，但没有更新-似乎有效我们在这里缺少了一些东西，仅使用提供的标记和样式，正如Arkej在链接的JSFIDLE中所演示的，您应该会收到预期的结果。请检查这个，不适用于我。好的，这是边框折叠的结果：折叠；Thanx，这不是我的预期输出，预期输出是数据1左边框红色和数据2左边框绿色

    table tr td:nth-child(1) {
      border-left: 4px solid green;
    }

    table tr td:nth-child(2) {
      border-left: 4px solid red;
    }

    table tr td:nth-child(3) {
      border-left: 4px solid yellow;
    }

   table tr td:nth-child(4) {
      border-left: 4px solid blue;
    }

<!-- language: lang-html -->

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

    </table>

<!-- end snippet -->