VPF::Сделать респонсив табличку с summary

mstdmstd

Дата 6.3.2017, 18:50 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 394
Регистрация: 30.12.2008

Репутация: нет
Всего: нет

Всем привет,
Есть небольшая респонсив табличка

Код


<div id="div_order_details_html"><div class="table-responsive dialog_table">
    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th>Product</th>
            <th>Sold</th>
            <th>Price</th>
            <th>Total</th>
        </tr>
        </thead>

        <tbody>
            <tr>
                <td>
                    <a href="http://local-wprods.com/admin/product/edit/5" class="a_link" target="_blank">
                        Woo Ninja,
                    </a>
                    <a href="http://local-wprods.com/admin/order/edit/14" class="a_link" target="_blank">
                    (00000001201702240002)
                    </a>
                </td>
                <td class="text-right">1</td>
                <td class="text-right">$20.00</td>
                <td class="text-right">$20.00</td>
            </tr>
            <tr>
                <td>
                    <a href="http://local-wprods.com/admin/product/edit/5" class="a_link" target="_blank">
                        Woo Ninja,
                    </a>
                    <a href="http://local-wprods.com/admin/order/edit/15" class="a_link" target="_blank">
                    (00000001201702250001)
                    </a>
                </td>
                <td class="text-right">2</td>
                <td class="text-right">$20.00</td>
                <td class="text-right">$40.00</td>
            </tr>
        
        <tr>
            <td>&nbsp;</td>
            <td class="text-right"><b>3</b></td>
            <td class="text-right">&nbsp;</td>
            <td class="text-right"><b>$60.00</b></td>
        </tr>

        </tbody>

    </table>
</div></div>

с ограничением по высоте вертикальным скроллингом

Код


.dialog_table {
  max-height: 560px;
  overflow: scroll;
}

и последняя строка это summary. Но при такой реализации эта строка также уходит в скроллин, что не очень удобно. А как сделать чтобы эта последняя строка не скроллилась?
Гуглом находил решения для заголовка, но не для summary.

Спасибо!

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »