jquery - IE で Kendo PanelBar 内をスクロールすると、縦線の不具合が発生する

Question

を使用したページを作成しましたKendo PanelBar。バーの中にテーブルがあります：

Kendo(Telerik) Panelbar内部にテーブルを含むページに取り組んでいます。

これは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>

テーブルの幅が特定の数より小さい場合、水平スクロール バーが表示されます。

左にスクロールしてから右にスクロールすると、テーブルに奇妙な縦線が表示されます。

どうすればこの欠陥を取り除くことができますか?