asp.net-mvc - 如何使用内联 css 修复引导表的标题？

Question

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

我尝试过将 position 属性与内联 css 一起使用，如下所示：

<tr style="position:fixed">

这将导致以下结果：

希望有人知道解决方案。

提前致谢！

标签： asp.net-mvcmodel-view-controllertwitter-bootstrap-3html-table

Answer 1

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

完整例如http://jsfiddle.net/T9Bhm/7/