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

【问题标题】：HTML table td border-left color not updating with rowspanHTML 表格 td 边框左颜色不随行跨度更新
【发布时间】：2017-10-23 18:46:08
【问题描述】：

我有带有行跨度的 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，左边框为红色

【问题讨论】：

已经设置类数据2但没有更新
jsfiddle - 似乎有效
我们在这里遗漏了一些东西，仅使用提供的标记和样式，正如 Arkej 在链接的 jsFiddle 中所展示的那样，您应该会收到预期的结果。
请检查一下，jsfiddle 不适合我。
好的，这是border-collapse: collapse;的结果

标签： html css

【解决方案1】：

设置fail-td class name 的第二个td 的data 1 值

.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>

【讨论】：

谢谢，这不是我预期的输出，预期输出是 Data1 left-boarder with red andData 2 with green left-border

【解决方案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 -->

【讨论】：