Html table border color

Hello experts,

How can I have the red border overlaps the green left one? It's because I have the "green" color border which indicates a priority of ticket and when you have same priorities below themselves, it looks ugly...all I need is to have the red(red is just here)border to overlap the green to visuallly divide the two <tr>s

here's the codepen: http://goo.gl/ay91Ud

//Note- I use bootstrap

EDIT: maybe not overlap but completely seperate red line is a better solution
LVL 1
Fajer39Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Slick812Commented:
greetings Fajer39, there are different ways to approach this, but in the cell blocks <td> you can NOT have more than one "border" in the CSS,  , the css left-border goes ALL the way from top to bottom, and does NOT include any of the top-border. To have the color on left (green) be divided by a red line, u can place an element that is on the left side that is green and 5px wide, or u can place a <div> in the <td class="priority-td> and give it a left-border of green 5px.

I changed the <td> to -
<td class="priority-td priority-1" column='subject'>
        <div>
        <Link to='ticketDetail' params={ticketId: ticket.id}>
          <span class='bold'>Ticket - </span>
          <span>sample sfkjld sfj alf</span>
        </Link>
        </div>
      </td>

Open in new window

by adding a <div> to it.
And changed the CSS to -
.ticket-tr {
  background-color: #fff;
  height: 52px;
  
  td.priority-td {
    padding:0;
    
    div{border-left: 5px solid green;
      height: 50px;
      padding: 14px 1px 1px 6px;
      margin:0;
    }
  }
  td {
    vertical-align: middle;
    border-top: 2px solid red !important;
  }
}

Open in new window


This is a partial solution, as It may need some change in the -
     padding: 14px 1px 1px 6px;
to more match what you want in your display?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Fajer39Author Commented:
Thank You, I played with it  and it works fine.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.