fixedheadertable固定表头

这里整合的版本是1.3。

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

![](/uploads/images/20220105/c661fc9a2a4bc3989bf08965bded2f44.png)

为了契合光年模板，做了css的调整，如下：
```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`

[点击查看 固定表头插件 在线演示](http://example.itshubao.com/example/134.html "点击查看 固定表头插件 在线演示")

涉及的文件：
- `js/jquery.fixedheadertable.js`