Scrolling inside Kendo PanelBar in IE creates vertical lines defect

Question

I have created a page which is using Kendo PanelBar. Inside of the bar I have a table:

I'm working on the page that has a Kendo(Telerik) Panelbar that contains a table inside.

This is the html:

<ul id="#panelBar-ID" class="operatorPanel" style="margin-bottom: 10px;">
    <li class="operatorGroup">

        <table style="width: 100%;">
           <tr><td>Some content</td></tr>
        </table>
       <div>
            <div class="table-responsive" style="background-color: white;">
                <table style="width:100%;" class="table dataTable">
                    <tr>
                        <th></th>
                        <th class="currencyRightAlign">Column1</th>
                        <th class="currencyRightAlign">Column2</th>
                        <th class="currencyRightAlign">Column3</th>
                        <th class="currencyRightAlign">Column4</th>
                        <th class="currencyRightAlign">Column5</th>
                        <th class="currencyRightAlign">Column6</th>
                        <th class="currencyRightAlign">TotalSales</th>
                    </tr>
                    <tr>
                        <td>Sales</td>
                        <td class="currencyRightAlign">@Html.DisplayFor(item => @file.Sales1, "CurrencyFormatter")</td>
                        <td class="currencyRightAlign">@Html.DisplayFor(item => @file.Sales2, "CurrencyFormatter")</td>
                        <td class="currencyRightAlign">@Html.DisplayFor(item => @file.Sales3, "CurrencyFormatter")</td>
                        <td class="currencyRightAlign">@Html.DisplayFor(item => @file.Sales4, "CurrencyFormatter")</td>
                        <td class="currencyRightAlign">@Html.DisplayFor(item => @file.Sales5, "CurrencyFormatter")</td>
                        <td class="currencyRightAlign">@Html.DisplayFor(item => @file.Sales6, "CurrencyFormatter")</td>
                        <td class="currencyRightAlign">@Html.DisplayFor(item => @file.TotalSales, "CurrencyFormatter")</td>
                    </tr>
                </table>
            </div>
        </div>
    </li>
</ul>

<script type="text/javascript">

      $(window).resize(function () {
         if ($("#tblScroll").width() < 500) {
              $("#tblScroll").css({ 'overflow-x': 'scroll' });
         }
       });
</script>

When table's width is less then a certain number, the horizontal scroll bars are displayed.

When I scroll to the left and then to the right, some strange vertical lines appear on the table:

How can I get rid of this defect?