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

please check these result, i think its working the correct way of you expecting

(function() {

    'use strict';

    angular
        .module('app',[])
        .controller('TableController', function($log, $scope) {
        $scope.tables = [
        {
          "name": "one_table",
          "columns": [
            {"name": "id"},{"name": "f_name"}           
          ]
        },
        {
          "name": "one_",
          "columns": []
        }, {
          "name": "two_",
          "columns": []
        }, {
          "name": "three_",
          "columns": []
        }, {
          "name": "four_",
          "columns": []
        }, {
          "name": "five_",
          "columns": []
        }, {
          "name": "six_",
          "columns": []
        }, {
          "name": "seven_",
          "columns": []
        }, {
          "name": "eight_",
          "columns": []
        }, {
          "name": "nine_",
          "columns": []
        }, {
          "name": "ten_",
          "columns": []
        }
      ];
      $scope.tindex = -1;
      $scope.rowClicked = function (idx) {
        $scope.tindex = idx;
      }
    });
})();

.panel-body {
    display: block;
    height: 230px;
    overflow-x: hidden;
    overflow-y: auto;
}
table {
    width:100%;
    max-width: 100%;
}
.table tbody tr td {
    border-top: 0px !important;
}
.arrow-left:after {
    border-bottom: 20px solid transparent;
    border-left: 20px solid #ccc;
    /* border-right: 20px solid transparent; */
    border-top: 20px solid transparent;
    clear: both;
    content: '';
    float: right;
    height: 0px;
    /* margin: 1px auto; */
    position: relative;
    right:8px;
    width: 0px;
}
table tr {
    width:100%;
    position:relative;
    border-top: 1px solid #ccc;
  
}
table tr td {
    width:100%;
}

  
  
  







  

      

          

              Tables
          
          

              

                  

                      

                          
{{table.name}}
                      
                  
              
          
      
      
HERE