css pseudo element (triangle outside the tr) position misaligned when scrollbar appears

Question

I have a panel which height is fixed and overflow-y:auto; in this panel I am displaying table and when user click on one of the row, triangle on right side of

Answer 1

It appears that the pseudoelement isn't being positioned correctly, even when the tr is given a position: relative

This issue can be fixed by adding the pseudoelement to the td instead.

   {{table.name}}

and altering the CSS slightly:

table tbody tr td {
  position: relative;
}

.arrow-left:after {
    border-bottom: 20px solid transparent;
    border-left: 20px solid #eee;
    border-right: 20px solid transparent;
    border-top: 20px solid transparent;
    clear: both;
    content: '';
    float: right;
    height: 0px;
    margin: 1px auto;
    position: absolute;
    top: -3px;
    right: -18px;
    width: 0px;
}

I'm not sure if moving the click event to the td is a solution for you however.

jsbin

update

To work with multiple td, update CSS as below:

table tbody tr td {
  position: relative;
}

.arrow-left td:last-of-type:after {
    border-bottom: 20px solid transparent;
    border-left: 20px solid #eee;
    border-right: 20px solid transparent;
    border-top: 20px solid transparent;
    clear: both;
    content: '';
    float: right;
    height: 0px;
    position: absolute;
    top: -2px;
    right: 0;
    width: 0px;
}

jsbin