光年模板说明文档
主题
字号
18px

fixedheadertable固定表头

这里整合的版本是1.3。

官网地址：http://www.fixedheadertable.com/

为了契合光年模板，做了css的调整，如下：

/* @group Reset */
.fht-table,
.fht-table thead,
.fht-table tfoot,
.fht-table tbody,
.fht-table tr,
.fht-table th,
.fht-table td {
    /* position */
    margin: 0;

    /* size */
    padding: 0;

    /* text */
    font-size: 100%;
    vertical-align: top;
}
.fht-table {
    /* appearance */
    border-collapse: collapse;
    border-spacing: 0;
}
/* @end */

/* @group Content */
.fht-table-wrapper,
.fht-table-wrapper .fht-thead,
.fht-table-wrapper .fht-tfoot,
.fht-table-wrapper .fht-fixed-column .fht-tbody,
.fht-table-wrapper .fht-fixed-body .fht-tbody,
.fht-table-wrapper .fht-tbody {
    /* appearance */
    overflow: hidden;

    /* position */
    position: relative;
}
.fht-table-wrapper .fht-fixed-body .fht-tbody,
.fht-table-wrapper .fht-tbody {
    /* appearance */
    overflow: auto;
}
.fht-table-wrapper .fht-table .fht-cell {
    /* appearance */
    overflow: hidden;

    /* size */
    height: 1px;
}
.fht-table-wrapper .fht-fixed-column,
.fht-table-wrapper .fht-fixed-body {
    /* position */
    top: 0;
    left: 0;
    position: absolute;
}
.fht-table-wrapper .fht-fixed-column {
    /* position */
    z-index: 1;
}
/* @end */

/*增加样式*/
.fht-thead .fht-table thead > tr > th,
.fht-tbody .fht-table thead > tr > th,
.fht-tfoot .fht-table thead > tr > th {
    border-width: 1px!important;
}
.fht-fixed-column .fht-thead,
.fht-fixed-column .fht-tbody,
.fht-tfoot {
    background-color: #f5f7fa;
}
.fht-tbody .table-bordered {
    border-top: 0px;
}
.fht-tfoot .fht-table {
    /*margin-top: -1px;*/
}
.fht-tfoot .fht-table th,
.fht-tfoot .fht-table td {
    border-top: 1px solid #eceeef!important;
}
.h-250 {
    height: 250px;
    overflow: hidden;
}
.h-400 {
    height: 400px;
    overflow: hidden;
}
.w-500 {
    width: 500px;
    overflow: hidden;
}
/* 强制不换行 */
.table-nowrap th,
.table-nowrap td {
    white-space: nowrap;
}

其中 h-250 h-400 w-500 是为了演示示例中能出现纵向和横向滚动条而使用的。

插件项目中页面名字：test_fixedheadertable.html test_fixedheadertable_v4.html

点击查看 固定表头插件 在线演示

涉及的文件：