Table表頭與數據列對齊問題解決方案

時間 2019-12-02

標籤 table 表頭數據對齊問題解決方案简体版

原文原文鏈接

　　產品要求是一個頁面要顯示幾千條數據，表格的表頭固定，而內容在超出table的高度後，還能自由滾動。

　　公司前端框架採用easyui，而用easyui展現幾千條數據的話，耗時須要在幾秒鐘，因此我就本身寫了一個table，展現以下。

大部分朋友若是遇到這種狀況的話，那麼首先會想到作兩個table，表頭一個，數據體一個。個人寫法是隻有一個table。

（須要注意的是最後一列必定不要設置寬度，若是設置的話總體會往右移動，會致使表頭與數據對不齊的狀況）。

以下代碼是我寫的一個demo，動態綁定數據。

代碼以下:javascript

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
table tbody {
display: block;
height: 500px;
overflow-y: scroll;
}

table thead, tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}

table thead {
width: calc( 100% - 1em );
background: #e9f5f7;
}

table {
border-width: 1px 1px 1px 1px !important;
border: 1px solid #ccc;

}

table tbody tr td {
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
word-wrap:break-word;
}
table thead tr th {
border-width: 1px 1px 1px 1px !important;
border-left: 1px solid #ccc;
}

.even {
background-color: white;
}

.odd {
background-color: #f5f5f5;
} 
</style>
</head>

<body>
<table width="80%" style="table-layout:fixed" id="tableValue" border="0" cellspacing="1" cellpadding="0">
<thead>
<tr>
<th style="border-left: none">姓名</th>
<th style="width: 20px">年齡</th>
<th style="width: 200px">出生年月</th>
<th style="width: 20px">手機號碼</th>
<th style="width: 20px">單位</th>
<th>姓名</th>
<th>年齡</th>
<th>出生年月</th>
<th>手機號碼</th>
<th>單位</th>
<th>姓名</th>
<th>年齡</th>
<th>出生年月</th>
<th>手機號碼</th>
<th>單位</th>
<th>姓名</th>
<th>年齡</th>
<th>出生年月</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>

<script src="@Rison.Utilities.Resource.referenceUri/scripts/jquery/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">

//頁面加載 
$(function () {
var html = "";
var url = '../ProductAutoPurchase/List1';
$.ajax({
type: 'POST',
url: url,
success: function (data) {
for (var i = 0; i < data.rows.length; i++) {
var row = data.rows[i];
var trColor;
//table--隔行變色 
if (i % 2 == 0) {
trColor = "even";
} else {
trColor = "odd";
}
html += "<tr class='" + trColor + "'>";
html += '<td style="border-left: none ">' + row.ProductSkuId + '</td>';
html += '<td style="width: 20px">' + row.ProductSkuCode + '</td>';
html += '<td style="width: 200px">' + row.ProductSkuFullName + '</td>';
html += '<td style="width: 20px">' + row.ProductSkuCode + '</td>';
html += '<td style="width: 20px">' + row.ProductSkuCode + '</td>';
html += '<td>' + row.ProductSkuCode + '</td>';
html += '<td>' + row.ProductSkuCode + '</td>';
html += '<td>' + row.ProductSkuCode + '</td>';
html += '<td>' + row.ProductSkuCode + '</td>';
html += '<td>' + row.ProductSkuCode + '</td>';
html += '<td>' + row.ProductSkuCode + '</td>';
html += '<td>' + row.ProductSkuCode + '</td>';
html += '<td>' + row.ProductSkuCode + '</td>';
html += '<td>' + row.ProductSkuCode + '</td>';
html += '<td>' + row.ProductSkuCode + '</td>';
html += '<td>' + row.ProductSkuCode + '</td>';
html += '<td>' + row.ProductSkuCode + '</td>';
html += '<td>' + row.ProductSkuCode + '</td>';
html += '</tr>';
}
$("#tableValue").append(html);
}
});
});
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。