superTables实现表格table复杂头部固定效果代码
代码语言：html
所属分类：表格
代码描述：superTables实现表格table复杂头部固定效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#demoTable td,#demoTable th{
height:30px;
min-width:100px;
font-family:"Helvetica Neue", "Microsoft Yahei", Arial, sans-serif;
font-size:12px;
}
#demoTable th{
background: #F2F2F2;
background-image: linear-gradient(to bottom, #f8f8f8 0%, #ececec 100%);
}
@media screen and (min-width: 1500px) {
#demoTable td,#demoTable th{
height:30px;
width:10%;
}
}
#demoTable td{
background:#fff;
}
#demoTable{
border-top:2px solid #428bca;
}
.fakeContainer {
margin: 5px 20px 20px 20px;
border: none;
overflow: hidden;
}
.my_width{
/*width:100%;*/
overflow:hidden;
padding:0 20px;
}
.first_div{
display:block;
margin:0 auto;
}
.radius{
border-radius:8px;
}
</style>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/superTables.css">
</head>
<body>
<div id="div_container" style="padding: 0 20px;text-align:center;">
<!-- 固定表头 table外层必须包有一个div id="my_div" class="fakeContainer first_div" 引入superTables.js 在页面下面还需要调用 -->
<div id="my_div" class="fakeContainer first_div" style="padding:1px">
<table border="1" id="demoTable" style="margin-top:5px;border-collapse: collapse;">
<tr id="my_tr">
<th class="center" rowspan="2">A</th>
<th class="center" rowspan="2">B</th>
<th class="center" colspan="8">C</th>
<th class="center" colspan="4">D</th>
<th class="center" colspan="5">E</th>
<th class="center" rowspan="2">F</th>
</tr>
<tr>
<th class="center">G</th>
<th class="center">H</th>
<th class="center">I</th>
<th class="center">J</th>
<th class="center">K</th>
<th class="center">L</th>
<th class="center">M</th>
<th class="center">N</th>
<th class="center">O</th>
<th class="center">P</th>
<th class="center">Q</th>
<th class="center">R</th>
<th class="center">S</th>
<th class="center">T</th>
<th class="center">U</th>
<th class="center">V</th>
<th class="center">W</th>
</tr>
<tr>
<td class="center" id="td">a</td>
<td class="center">12</a></td>
<td class="center">7</td>
<td class="center">2</td>
<td class="center">0</td>
<td class="center">0</td>
<td class="center">0</td>
<td class="center">3</td>
<td class="center">0</td>
<td class="center">0</td>
<td class="center">1</td>
<td class="center">0</td>
<td class="center">2</td>
<td class="center">1</td>
<td class="center">2744</td>
<td class="center">1728</td>
<td class="center">1634</td>
<td class="center">1744</td>
<td class="center">7850</td>
<td class="center">208</td>
</tr>
<tr>
<td class="center" id="td">b</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">c</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">d</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">e</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">f</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">g</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">h</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">i</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">j</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">k</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">l</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">m</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">n</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">o</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">p</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">q</td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
<td class="center"></td>
</tr>
<tr>
<td class="center" id="td">r</td>
<td class="center">12</td>
<td class="center">7</td>
<td class="center">2</td>
<td class="center">0</td>
<td class="center">0</td>
<td class="center">0</td>
<td class="center">3</td>
<td class="center">0</td>
<td class="center">0</td>
<td class="center">1</td>
<td class="center">0</td>
<td class="c.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0