如何使用内联css使引导表头固定？

Question

我正在尝试使用bootstrap模板创建一个具有固定标题的可排序表格。bootstrap的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>

我尝试过在内联css中使用position属性，如下所示：

<tr style="position:fixed">

这将导致以下结果：

​

​

希望有人知道解决方案。

提前感谢！

Answer 1

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

full，如http://jsfiddle.net/T9Bhm/7/