今天遇到一個問題怎麼使表頭行不動
如圖：
仔細思考之後發現沒有此類的參考怎麼辦呢？
解決方案是使用倆個table：1.一個table是表頭，一個table是下面的
具體代碼如下：
//html代碼：
</div>
<div id="createtable1" style="position:relative;position:absolute; top:20%; left:20px; width: 98%; height: auto;">
</div>
<div id="createtable" style="position:relative;position:absolute; top:28%; left:20px; width: 99%; height: 100%;">
</div>
具體js代碼：因爲我的table是動態生成的
function CreateTable(Count) {
//動態生成table
var table1 = $("<table id='bodytable' width='99%' heigth='30%' border='1px'>");
table1.appendTo($("#createtable1"));//table放入div中
var tr = $("<tr style='color:#03D5DD;font-weight: bold;height:10%;_position:absolute;font-size:14px'></tr>");//動態創建tr
tr.appendTo(table1);//tr加入table
var th = $("<th width='10%' style='BORDER-RIGHT: #f6f6f6 0px solid; text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px;' height='20px'>"
+ '門店名稱' + "</th>");//動態生成td
th.appendTo(tr);//td加入tr
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'
>" + '狀態'
+ "</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>"
+ 'pc'
+ "</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>"
+ '網絡'
+ "</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>"
+ '天線'
+ "</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>"
+ 'REDER'
+ "</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>"
+ '播放素材'
+ "</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>實時監控</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>查看詳情</th>");
th.appendTo(tr);
var table = $("<table id='bodytable' width='99%' heigth='30%' border=\"1\">");
table.appendTo($("#createtable"));
--------------------------------------------------------------------------------------以上是表頭，以下是表----------------------------------------------------------------------------------------
for (var i = 0; i < Count.length; i++) {
var tr = $("<tr style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;' width='10%' id='"+Count[i].shopName+"'></tr>");
tr.appendTo(table);
var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;' width='10%' id='td"+Count[i].shopName+"'>" + Count[i].shopName
+ "</td>");
td.appendTo(tr);
if (Count[i].state == "1") {
document.getElementById("td"+Count[i].shopName+"").style.color = "red"
}
if (Count[i].state == "0") {
document.getElementById("td" + Count[i].shopName + "").style.color = "#0C9624"
}
var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;' width='10%' ><input type='button'disabled='true' id='state"+i+"' ></td>");
td.appendTo(tr);
if (Count[i].state == "1") {
document.getElementById("state" + i + "").value = "異常"
document.getElementById("state" + i + "").style.Color = "white"
document.getElementById("state" + i + "").style.backgroundColor = "red"
// document.getElementById("state"+i+"").parentNode.style.color="white"
}
if (Count[i].state == "0") {
document.getElementById("state" + i + "").value = "正常"
document.getElementById("state" + i + "").style.backgroundColor = "#0C9624"
}
var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;'><input type='button'disabled='true' id='pc"+i+"'></td>");
td.appendTo(tr);
if (Count[i].pc == "1" | Count[i].pc == null) {
document.getElementById("pc" + i + "").value = "異常"
document.getElementById("pc" + i + "").style.backgroundColor = "red"
}
if (Count[i].pc == "0") {
document.getElementById("pc" + i + "").value = "正常"
document.getElementById("pc" + i + "").style.backgroundColor = "#0C9624"
}
var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;'><input type='button' disabled='true' id='web"+i+"'></td>");
td.appendTo(tr);
if (Count[i].web == "1") {
document.getElementById("web" + i + "").value = "異常"
document.getElementById("web" + i + "").style.backgroundColor = "red"
}
if (Count[i].web == "0") {
document.getElementById("web" + i + "").value = "正常"
document.getElementById("web" + i + "").style.backgroundColor = "#0C9624"
}
var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;'><input type='button'disabled='true'id='antenna"+i+"'></td>");
td.appendTo(tr);
if (Count[i].antenna == "1" | Count[i].antenna == null) {
document.getElementById("antenna" + i + "").value = "異常"
document.getElementById("antenna" + i + "").style.backgroundColor = "red"
}
if (Count[i].antenna == "0") {
document.getElementById("antenna" + i + "").value = "正常"
document.getElementById("antenna" + i + "").style.backgroundColor = "#0C9624"
}
var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;'><input type='button' disabled='true' id='reader"+i+"'></td>");
td.appendTo(tr);
if (Count[i].reader == "1" | Count[i].reader == null) {
document.getElementById("reader" + i + "").value = "異常"
document.getElementById("reader" + i + "").style.backgroundColor = "red"
}
if (Count[i].reader == "0") {
document.getElementById("reader" + i + "").value = "正常"
document.getElementById("reader" + i + "").style.backgroundColor = "#0C9624"
}
var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;'><input type='button' disabled='true' id='broadcastMaterial"+i+"'></td>");
td.appendTo(tr);
if (Count[i].broadcastMaterial == "1"
| Count[i].broadcastMaterial == null) {
document.getElementById("broadcastMaterial" + i + "").value = "異常"
document.getElementById("broadcastMaterial" + i + "").style.backgroundColor = "red"
}
if (Count[i].broadcastMaterial == "0") {
document.getElementById("broadcastMaterial" + i + "").value = "正常"
document.getElementById("broadcastMaterial" + i + "").style.backgroundColor = "#0C9624"
}
var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;'><input type='button' id='realtimeSupervision" + i
+ "' οnclick='realtimeSupervision(this)'></td>");
td.appendTo(tr);
document.getElementById("realtimeSupervision" + i + "").value = "查看"
document.getElementById("realtimeSupervision" + i + "").style.backgroundColor = "#FEF430"
var td = $(" <td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;' width='10%'><a href='#div3' ><input type='button' id='details" + i
+ "' οnclick='details(this)'></a></td>");
td.appendTo(tr);
document.getElementById("details" + i + "").value = "查看"
document.getElementById("details" + i + "").style.backgroundColor = "#FEF430"
}
}
樣式：#createtable {
min-height: 250px;
overflow-y: auto;
max-height: 300px;
width: 100%
}
結果：
