Table表头与数据列对齐问题解决⽅案
  产品要求是⼀个页⾯要显⽰⼏千条数据，表格的表头固定，⽽内容在超出table的⾼度后，还能⾃由滚动。
  公司前端框架采⽤easyui，⽽⽤easyui展⽰⼏千条数据的话，耗时需要在⼏秒钟，所以我就⾃⼰写了⼀个table，展⽰如下。
⼤部分朋友如果遇到这种情况的话，那么⾸先会想到做两个table，表头⼀个，数据体⼀个。我的写法是只有⼀个table。
（需要注意的是最后⼀列⼀定不要设置宽度，如果设置的话整体会往右移动，会导致表头与数据对不齐的情况）。
如下代码是我写的⼀个demo，动态绑定数据。
代码如下:
<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;
easyui框架}
.odd {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<table width="80%" id="tableValue" border="0" cellspacing="1" cellpadding="0">
<thead>
<tr>
<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>⼿机号码</th>
<th>单位</th>
<th>姓名</th>
<th>年龄</th>
<th>出⽣年⽉</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
<script src="@Rison.ferenceUri/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 < ws.length; i++) {
var row = ws[i];
var trColor;
//table--隔⾏变⾊
if (i % 2 == 0) {
trColor = "even";
} else {
trColor = "odd";
}
html += "<tr class='" + trColor + "'>";
html += '<td >' + row.ProductSkuId + '</td>';
html += '<td >' + row.ProductSkuCode + '</td>';
html += '<td >' + row.ProductSkuFullName + '</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 += '<td>' + row.ProductSkuCode + '</td>';
html += '<td>' + row.ProductSkuCode + '</td>';
html += '</tr>';
}
$("#tableValue").append(html);
}
});
});
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。