title: Overlay scroll bar doesn't work in mozilla and IE
body: <p>In our application we have a table with dynamic no of rows and columns.. same directive is used for displaying two different tables. I have added a overlay scroll bar to table...  that's working fine in chrome but in Mozilla and IE it doesn't.. In both browsers it acts like normal scrollbar and causes misalignment.. Can someone help me with this.. any other solution to avoid table misalignment.
  <a href="https://jsfiddle.net/KrishnaAnanthi/t1vna5uz/" rel="nofollow noreferrer">https://jsfiddle.net/KrishnaAnanthi/t1vna5uz/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table,
  th,
  td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  
  th,
  td {
    padding: 5px;
  }
  
  .filter-container {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0px !important;
    margin: 0px !important;
  }
  
  .header-container {
    height: 100%;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
  }
  
  .header-text {
    font-size: 22px;
    line-height: 24px;
  }
  
  .header-text {
    color: #000000;
    font-weight: normal;
    word-break: break-all;
  }
  
  tbody.scrollContent {
    max-height: 100px;
    overflow-x: hidden;
    overflow-y: overlay;
    background-color: white;
  }
  
  tbody {
    display: block;
  }
  
  .header-text {
    width: 90%;
    float: left;
    text-align: start;
    letter-spacing: 0;
    text-align: left;
  }
  
  .icon-right {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -10px;
  }
  
  .sort-icon {
    float: right !important;
    clear: right;
    height: 1px !important;
  }
  
  thead,
  tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table style="width:80%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;
          &lt;div class='filter-container header-container'&gt;
            &lt;div class='header-text'&gt; Name of station &lt;/div&gt;
            &lt;div class='icon-right'&gt; &lt;span class="fa fa-sort-asc fa-lg sort-icon "&gt;&lt;/span&gt;&lt;span class="fa fa-sort-desc fa-lg sort-icon  "&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/th&gt;
        &lt;th&gt;
          &lt;div class='filter-container header-container'&gt;
            &lt;div class='header-text'&gt; lastname&lt;/div&gt;
            &lt;div class='icon-right'&gt; &lt;span class="fa fa-sort-asc fa-lg sort-icon "&gt;&lt;/span&gt;&lt;span class="fa fa-sort-desc fa-lg sort-icon  "&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/th&gt;
        &lt;th&gt;
          &lt;div class='filter-container header-container'&gt;
            &lt;div class='header-text'&gt; Age&lt;/div&gt;
            &lt;div class='icon-right'&gt; &lt;span class="fa fa-sort-asc fa-lg sort-icon "&gt;&lt;/span&gt;&lt;span class="fa fa-sort-desc fa-lg sort-icon  "&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/th&gt;
        &lt;th&gt;
          &lt;div class='filter-container header-container'&gt;
            &lt;div class='header-text'&gt; Address&lt;/div&gt;
            &lt;div class='icon-right'&gt; &lt;span class="fa fa-sort-asc fa-lg sort-icon "&gt;&lt;/span&gt;&lt;span class="fa fa-sort-desc fa-lg sort-icon  "&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/th&gt;
        &lt;th&gt;
          &lt;div class='filter-container header-container'&gt;
            &lt;div class='header-text'&gt; Hobby&lt;/div&gt;
            &lt;div class='icon-right'&gt; &lt;span class="fa fa-sort-asc fa-lg sort-icon "&gt;&lt;/span&gt;&lt;span class="fa fa-sort-desc fa-lg sort-icon  "&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody class='scrollContent'&gt;
      &lt;tr&gt;
        &lt;td&gt;Jill&lt;/td&gt;
        &lt;td&gt;Smith&lt;/td&gt;
        &lt;td&gt;50&lt;/td&gt;
        &lt;td&gt;Bangalore&lt;/td&gt;
        &lt;td&gt;Playing&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Eve&lt;/td&gt;
        &lt;td&gt;Jackson&lt;/td&gt;
        &lt;td&gt;94&lt;/td&gt;
        &lt;td&gt;Bangalore&lt;/td&gt;
        &lt;td&gt;Playing&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Doe&lt;/td&gt;
        &lt;td&gt;80&lt;/td&gt;
        &lt;td&gt;Bangalore&lt;/td&gt;
        &lt;td&gt;Playing&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Doe&lt;/td&gt;
        &lt;td&gt;80&lt;/td&gt;
        &lt;td&gt;Bangalore&lt;/td&gt;
        &lt;td&gt;Playing&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Doe&lt;/td&gt;
        &lt;td&gt;80&lt;/td&gt;
        &lt;td&gt;Bangalore&lt;/td&gt;
        &lt;td&gt;Playing&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Doe&lt;/td&gt;
        &lt;td&gt;80&lt;/td&gt;
        &lt;td&gt;Bangalore&lt;/td&gt;
        &lt;td&gt;Playing&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Doe&lt;/td&gt;
        &lt;td&gt;80&lt;/td&gt;
        &lt;td&gt;Bangalore&lt;/td&gt;
        &lt;td&gt;Playing&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Doe&lt;/td&gt;
        &lt;td&gt;80&lt;/td&gt;
        &lt;td&gt;Bangalore&lt;/td&gt;
        &lt;td&gt;Playing&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Doe&lt;/td&gt;
        &lt;td&gt;80&lt;/td&gt;
        &lt;td&gt;Bangalore&lt;/td&gt;
        &lt;td&gt;Playing&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Doe&lt;/td&gt;
        &lt;td&gt;80&lt;/td&gt;
        &lt;td&gt;Bangalore&lt;/td&gt;
        &lt;td&gt;Playing&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Doe&lt;/td&gt;
        &lt;td&gt;80&lt;/td&gt;
        &lt;td&gt;Bangalore&lt;/td&gt;
        &lt;td&gt;Playing&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Doe&lt;/td&gt;
        &lt;td&gt;80&lt;/td&gt;
        &lt;td&gt;Bangalore&lt;/td&gt;
        &lt;td&gt;Playing&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Doe&lt;/td&gt;
        &lt;td&gt;80&lt;/td&gt;
        &lt;td&gt;Bangalore&lt;/td&gt;
        &lt;td&gt;Playing&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Doe&lt;/td&gt;
        &lt;td&gt;80&lt;/td&gt;
        &lt;td&gt;Bangalore&lt;/td&gt;
        &lt;td&gt;Playing&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/6KY31.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6KY31.png" alt="misalignment becoz of scrollbar"></a></p>