Как сделать так, чтобы заголовок таблицы начальной загрузки был исправлен с помощью встроенного CSS?

Question

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

Это то, что я получил до сих пор:

    <div class="row" style="margin-top: 3%;">
    <div class="col-lg-12 d-flex align-items-stretch" style="height: 650px; overflow: auto;">
        <table id="dtDynamicVerticalScrollExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
            <tr>
                <th>
                    ID
                </th>
                <th>
                    Company
                </th>
                <th>
                    Name
                </th>
                <th>
                    URL
                </th>
                <th></th>
            </tr>

            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.ApiRedirectID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Company.CompanyName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ApiName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ApiURL2)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "Edit", new { id = item.ApiRedirectID }) |
                        @Html.ActionLink("Delete", "Delete", new { id = item.ApiRedirectID })
                    </td>
                </tr>
            }
        </table>

        </div>
    </div>

Я пытался использовать атрибут position с встроенным CSS следующим образом:

<tr style="position:fixed">

Это приведет к следующему:

Надеюсь, кто-то знает решение.

Заранее спасибо!

Answer 1

thead, tbody, tr, td, th { display: block; }

полный, например, http://jsfiddle.net/T9Bhm/7/