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
这在大型设备（PC和平板电脑）上效果惊人，但我找不到使该设备适合移动设备的解决方案。上方有2个不同的表格，因此您必须在手机上分别滚动它们。（水平）
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/
猜猜是什么。同样的问题，标题列的宽度与正文列的宽度不同。

如何在MVC中获得具有固定标题的响应表

0 个答案: