CODEWITHSUNDEEP
htmlcss
Dushyantha
Dushyantha

Reputation: 217

HTML table td border-left color not updating with rowspan

I have HTML table with rowspan and I want to td with different boarder-left color

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;
}

Expected output is rowspan second row td with green color left border But result is td with red color left border enter image description here

Upvotes: 0

Views: 458

Answers (2)

Muhammad Muzamil
Muhammad Muzamil

Reputation: 1242

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

Upvotes: 0

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7165

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

Upvotes: 1

Related Questions