製作過程
其實表頭的固定就相當於使用兩個表格,一個在上面,一個在下面,上下排列,下面的表格容器可以滾動,上面的只有表頭一行,爲了讓兩個表格各列的寬度一致,可以獲取下面表格各列的寬度,然後給上面表格添加對應的width,下面的代碼是事例,瀏覽器可以運行
表格列可以將一個input放入td,這樣就可以編輯表格內容,通過focus和blur可以爲單元格添加不同的style。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML凍結表頭和側邊欄,表格內容可編輯</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.divleft {
width: 150px;
float: left;
box-shadow: 0 0px 3px 3px rgba(0,0,0,.1);
}
.divright {
width: calc(100% - 150px);
float: left;
overflow: auto;
}
input {
outline: none;
border: none;
width: 100%;
height: calc(100% - 2px);
background: transparent;
}
.abtn {
font-size: 12px;
color: #448AFF;
float: left;
margin: 0 5px;
width: 40px;
height: 16px;
text-align: center;
cursor: pointer;
line-height: 16px;
text-decoration:underline
}
table {
margin-bottom: 0px !important;
}
thead {
background: #448AFF;
color: #fff
}
#tableleft {
margin-bottom: 0px;
width: 100%;
height: 300px;
overflow: hidden;
}
#tableright {
margin-bottom: 0px;
height: 300px;
overflow: auto
}
</style>
<body>
<div style="width: 100%;overflow: auto;height: 400px">
<div class="divleft">
<table class="table table-bordered" id="tabletop1">
<thead>
<tr>
<th style="width: 40px">#</th>
<th>產品</th>
</tr>
</thead>
</table>
<div style="" id="tableleft">
<table class="table table-bordered">
<tbody>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="divright">
<table class="table table-bordered" id="tabletop2">
<thead>
<tr>
<th>單位</th>
<th>產品</th>
<th>操作</th>
</tr>
</thead>
</table>
<div id="tableright">
<table class="table table-bordered">
<tbody>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="頂部的 Popover 中的一些內容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="頂部的 Popover 中的一些內容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="頂部的 Popover 中的一些內容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="頂部的 Popover 中的一些內容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="頂部的 Popover 中的一些內容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="頂部的 Popover 中的一些內容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="頂部的 Popover 中的一些內容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="頂部的 Popover 中的一些內容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="頂部的 Popover 中的一些內容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="頂部的 Popover 中的一些內容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="頂部的 Popover 中的一些內容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script>
//調用表頭寬度設置函數
gettdwidth($("#tabletop2"));
//表頭寬度設置函數
function gettdwidth(elme) {
var elet = elme.find("th");
//獲取表格tbody中的td元素
var eleb = elme.siblings("div").find("td");
var length = elet.length;
for (var i = 0; i < length; i++) {
//最後一個表頭列要將滾動條區域不全,其他和對應td寬度一致
if (i == length - 1) {
elet.eq(i).css("width", eleb.eq(i).width() + 26)
} else {
elet.eq(i).css("width", eleb.eq(i).width())
}
}
}
//bootstrap提示框,可以自定義顯示內容
$(function () {
$("[data-toggle='popover']").popover();
});
//當頁面resize時自適應
$(window).resize(function() {
gettdwidth($("#tabletop2"));
});
//側邊欄滾動和表格內容綁定,可以凍結側邊某列值
$("#tableright").on("scroll", function() {
var scrolltop = $(this).scrollTop();
$("#tableleft").scrollTop(scrolltop);
});
//編輯單元格
$("input").on("focus", function() {
$(this).parent().css("border-bottom", "1px solid #448AFF")
})
//單元格失去焦點
$("input").on("blur", function() {
$(this).parent().css("border-bottom", "1px solid #ddd")
})
</script>
</html>