Как сделать таблицу прокручиваемой внутри div с фиксированным заголовком таблицы для пользовательского интерфейса?

Question

Я сделал прокрутку таблицы внутри div, и все работает нормально, но заголовок таблицы слишком прокручивается. Я хочу, чтобы исправить заголовок таблицы. И эта таблица отображается в div. Я использовал модель PahingHelper для пейджинга. Я пытался использовать прокручиваемую таблицу, но она тоже не работает. Итак, я здесь, чтобы сделать скроллируемую таблицу. Есть ли способ сделать таблицу прокручиваемой? // вот мой пример кода для прокрутки

@model ShresthaTrade.Helper.PagingHelper
    <table >
            <tr>
                <th>Brand</th>
                <th>Machine Type</th>
                <th>Machine Model</th>
                <th>Machine Serial</th>
                <th>Mac Address</th>

        </tr>
        </table>
<div style=" overflow:auto; height: 340px;">
    <table >
        <tbody>
            @if (Model.Datatable.Rows.Count > 0)
            {
                foreach (System.Data.DataRow row in Model.Datatable.Rows)
                {
                    <tr>
                        <td>@row["brand_name"]</td>
                        <td>@row["machine_type_name"]</td>
                        <td>@row["MachineModel"]</td>
                        <td>@row["MachineSerial"]</td>
                        <td>@row["MacAddress"]</td>
                    </tr>

                }
            }
            else
            {
                <tr>
                    <td colspan="4">No records are found</td>
                </tr>
            }
        </tbody>
    </table>
</div>