Как получить отзывчивую таблицу с фиксированным заголовком в MVC

Question

Я хотел бы сделать мой фиксированный заголовок таблицы (всегда видимым) .Я пробовал это несколькими способами, создавая две таблицы друг над другом, с фиксированным положением, давал каждому столбцу определенную ширину, ...

НО я также хотел бы, чтобы моя таблица была отзывчивой Так же, как стандарты bootstrap4.Не можете найти какое-либо решение онлайн, которое работает для меня, есть ли у кого-нибудь какие-либо предложения или отправные точки, что искать?

--- Посмотрите, что я попробовал ниже ----

Моя базовая таблица сейчас:

    <div style="overflow:auto; height:60vh">
    <table class="table table-hover trCursor">
        <thead>
            <tr>
                <th scope="col">#Id</th>
                <th scope="col">
                    @Html.ActionLink("Name", "Products", new { sortOrder = ViewBag.NameSortParm })&nbsp;<i class="fas fa-sort"></i>
                </th>
                <th scope="col">Description</th>
                <th scope="col">(Internal) Product number</th>
                <th scope="col">Price(s)</th>
                <th scope="col">Supplier(s)</th>
                <th scope="col">
                    @Html.ActionLink("Created", "Products", new { sortOrder = ViewBag.DateSortParm })&nbsp;<i class="fas fa-sort"></i>
                </th>
                @*<th scope="col">Product type</th>*@
            </tr>

        </thead>
        <tbody id="productsBody">
    @Html.Partial("_Products", Model)
</tbody>
</table>
</div>

Обновление Это основные вещи, которые я опробовал:

https://codepen.io/nikhil8krishnan/pen/WvYPvv
Это работало потрясающе на больших устройствах (ПК и планшетах), но я не мог найти решение, чтобы сделать это мобильным.Есть две разные таблицы друг над другом, поэтому вы должны прокручивать их по отдельности на вашем телефоне .. (по горизонтали)

http://www.iamramraj.com/bootstrap-fixed-table-header-using-css/?i=1
Этот работает только набольшой экран.Оказалось, что они используют классы начальной загрузки col-xs-5 и т. Д., Чтобы придать столбцам определенную ширину, что приводит к невосприимчивой таблице.

Update2 Далеевещи, которые я пробовал:

https://mdbootstrap.com/support/jquery/fixed-header-with-scrolling-table/
Это очень симпатичный рабочий стол , но не отзывчивый .На небольшом устройстве заголовок таблицы и тело прокручиваются по-разному и имеют разную ширину.

https://forums.asp.net/t/2094852.aspx?MVC+Fixed+Header+rows+for+IEnumerable+table+razor+view
Та же проблема, рабочий стол, но не отвечает.Ширина столбцов отличается от ширины заголовков.

https://www.bootply.com/JnOYtO9xzn
Когда я реализовал это, он даже не реагировал с самого начала!Жатка была исправлена, тело можно было прокручивать, но положение было неправильным, а также не отвечало.

https://jsfiddle.net/dPixie/byB9d/3/
Угадайте, что .. Снова та же проблема, столбцы заголовка не имеют такую ​​же ширину, как столбцы тела.