How to make table scrollable inside div with fixed table header of sementic ui?

Question

I have make table scrollable inside div and everything is working fine but table header is too scrolling.I want to make table header fixed. And this table is rendered within a div. I have used PahingHelper model for paging.I have tried to use scrollable in table but it too is not working.So, am here to make scrollable-table. Is there any way to make table scrollable? // here is my sample code for scrolling

@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>