【发布时间】：2019-02-04 12:30:29
【问题描述】：
我正在尝试制作一个表格，其标题在您向下滚动时会粘在顶部。我一直在关注这个视频：https://www.youtube.com/watch?v=SkVPkpSkorw。 我的表作为标题未对齐。欢迎任何方法。我认为复制标题行会保持其原始宽度，但看起来宽度由于某种原因变得更短了
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<!-- This allows for the web page to fit any sized screen -->
<meta name="viewpoint" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<table cellpadding="5" cellspacing="0" border="1">
<thead>
<tr style="background: aqua">
<td>First</td>
<td>Last</td>
<td>Phone</td>
<td>Email Address</td>
</tr>
</thead>
<tbody>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
<tr>
<td>Luke</td>
<td>SkyWalker</td>
<td>18002255625</td>
<td>darthismyfather@yahoo.com</td>
</tr>
</tbody>
</table>
</div>
<script>
// http://obvcode.blogspot.com/2007/11/easiest-way-to-check-ie-version-with.html
var Browser = {
version: function() {
var version = 999; // we assume a sane browser
if (navigator.appVersion.indexOf("MSIE") != -1) {
// bah, IE again, lets downgrade version number
version = parseFloat(navigator.appVersion.split("MSIE")[1]);
}
return version;
}
};
var table = $('table'),
thead = table.find('thead'),
fixed_thead,
the_window = $(window),
tr_1, tr_2, did_scroll = false;
thead.find('td').each(function() {
$(this).css('width', $(this).width());
});
fixed_thead = thead.clone();
thead.after(fixed_thead);
if( Browser.version() < 8 ) {
fixed_thead.find('tr').css({
'position': 'absolute',
'top': 0
});
tr_1 = fixed_thead.find('tr:first');
tr_2 = fixed_thead.find('tr:last').css('margin-top', tr_1.height());
}else {
fixed_thead.css({
'position': 'fixed',
'top': 0,
'width': table.width()
});
}
fixed_thead.hide();
the_window.scroll(function() {
if( the_window.scrollTop() >= table.offset().top ) {
fixed_thead.show();
if( Browser.version() < 8 ) {
did_scroll = true;
}
}else {
fixed_thead.hide();
}
if( the_window.scrollTop() > (table.offset().top + table.height()) - fixed_thead.height() ) {
fixed_thead.hide();
}
});
setInterval(function() {
if( did_scroll ) {
did_scroll = false;
tr_1.css('top', the_window.scrollTop());
tr_2.css('top', the_window.scrollTop());
}
}, 250);
</script>
</body>
</html>【问题讨论】：
标签： javascript html css