.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; }
根据freezeheader.js修改的一个简单的jquery固定表头表格插件,简单易懂,学习其中原理,自己根据需求改吧改吧变成自己的