Прокрутка внутри Kendo PanelBar в IE создает дефект вертикальных линий

Я создал страницу, которая использует 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>

Когда ширина таблицы меньше определенного числа, отображаются горизонтальные полосы прокрутки.

Когда я прокручиваю влево, а затем вправо, на столе появляются странные вертикальные линии:

Как я могу избавиться от этого дефекта?

0 ответов

Другие вопросы по тегам