Html
    Css
    Js

    
                        
.tableBox table {
  width: 100%;
}

.tableBox thead {
  width: 100%;
  border-top: 1px solid #c5d9f1;
  border-left: 1px solid #c5d9f1;
}
.tableBox tbody td,
.tableBox thead th {
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: #404040;
}

.tableBox thead th {
  background-color: #d8e5f4;
  border-bottom: 1px solid #c5d9f1;
  border-right: 1px solid #c5d9f1;
}

.tableBox tbody {
  border-left: 1px solid #dcdddd;
}

.tableBox tbody td {
  border-bottom: 1px solid #dcdddd;
  border-right: 1px solid #dcdddd;
  background-color: #FFFFFF;
}

.tableBox tbody tr:nth-child(even) td {
  background-color: #f9f9f9;
}
.tableBox table td,.tableBox table th {
  vertical-align: middle;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

table表格固定表头

根据freezeheader.js修改的一个简单的jquery固定表头表格插件,简单易懂,学习其中原理,自己根据需求改吧改吧变成自己的

0