Question

我正在尝试在视图中为表格制作固定标题。我搜索并没有找到太多，所以我最终尝试了一个在http://mkoryak.github.io/floatThead/找到的插件。实现它添加一个额外的空白thead到我的tblPersons表，看起来像这样：

然后我尝试使用这个jquery代码隐藏thead（我在视图上有两个完整的主题，这通过id选择我需要的那个，或者缺少它）：

$('thead[id!="personsHeader"]').hide();

哪个删除了thead，但它删除了我的结果的第一行：

Kirk | Alexander | 06/02/2015

视觉：

这对我没有意义，因为thead与tbody所在的Kirk row分开......

最后供我参考，这是我的View表单代码：

@using (Html.BeginForm("Index", "Persons"))
{
<div class="panel panel-default">
    <div class="panel-heading">
        <table id="tablePanelHeader" class="table table-bordered menu-options">
            <tr>
                <td>
                    Persons Pages:
                    @Html.DropDownList("PersonsDDL", new SelectList(listItems, "Value", "Text"))
                </td>
                <td>
                    Search filter: <input type="text" id="search" ="Type to search">
                </td>
            </tr>
            <tr>
                <td id="rowCount">

                </td>
            </tr>
        </table>
    </div>
    <div class="span3">
        <table id="tblPersons" class="table table-bordered">
            <thead id="personsHeader">
                <tr class="page-header">
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Birthdate</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @item.firstname
                        </td>
                        <td>
                            @item.lastname
                        </td>
                        <td>
                            @item.birthdate.ToString("MM/dd/yyyy")
                        </td>


         </tr>
            }
        </tbody>
    </table>
</div>

}

我已经尽力了，现在我转向专业人士......我做错了什么？

Answer 1

有几种方法可以做到这一点。就我个人而言，我一直都喜欢全力以赴，而不是在这种混合中加入大量的js。

有关仅使用css - http://codepen.io/tjvantoll/pen/JEKIu

的固定表标题的示例，请参阅此处

.fixed_headers {
   width: @table_width;
   table-layout: fixed;
   border-collapse: collapse;

   th { text-decoration: underline; }
   th, td {
       padding: 5px;
       text-align: left;
   }

   td:nth-child(1), th:nth-child(1) { min-width: @column_one_width; }
   td:nth-child(2), th:nth-child(2) { min-width: @column_two_width; }
   td:nth-child(3), th:nth-child(3) { width: @column_three_width; }

   thead {
     background-color: @header_background_color;
     color: @header_text_color;
     tr {
     display: block;
     position: relative;
   }
 }
 tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: @table_body_height;
    tr:nth-child(even) {
    background-color: @alternate_row_background_color;
  }
 }
}

如果你开始使用javascript库，请尝试使用jQuery Datatables - datatables.net/examples/basic_init/scroll_y.html

修复了头文件脚本函数floatHead正在添加一个额外的thead

1 个答案: