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

[mstdmstd]

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

<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> </td>
<td class="text-right"><b>3</b></td>
<td class="text-right"> </td>
<td class="text-right"><b>$60.00</b></td>

</tr>

</tbody>

</table>

</div></div>

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

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

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

 

Спасибо!