我有一个带有表格的html页面，我使用这个JQuery插件：http://mkoryak.github.io/floatThead/
当floatThead发挥作用时，我的标题会缩小。这是我的代码：
import angular from 'angular';
import 'angular-mocks';
import './CurrentUser';
describe('CurrentUser', function () {
"use strict";
var user = {userid: 'abc', token: 'token'};
var storageFactoryMock = {
get: function (key) {
return user;
},
put: function (key, newUser) {
user = newUser;
},
remove: function (key) {
user = undefined;
}
};
beforeEach(function () {
angular.module('StorageFactoryModule')
.value('StorageFactory', storageFactoryMock);
angular.mock.module('CurrentUserModule');
});
it('should Initialize User from local storage if already exists there', inject(function (CurrentUser) {
expect(CurrentUser.profile).toEqual(user);
}))
});
我实际上删除了大部分的HTML代码。基本上我放了很多行 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/jquery.floatThead.min.js"></script>
<link rel="stylesheet" href="no-rank.css" />
</head>
<body>
<script type="text/javascript">
var target = $('body');
var totalHeight;
$(document).ready(function() { totalHeight = $(document).height();
var $table = $('table.header-fixed');
$table.floatThead();
});
</script>
<table class='header-fixed main-table'>
<thead>
<tr class="LeaderboardHeader">
<th class="ranktitle"> </th>
<th class="nametitle"> Name </th>
<th class="steptitle"> </th>
<th class="visualtitle"> Steps </th>
</tr>
</thead>
<tbody>
<tr>
<td class="rank"> 1 </td>
<td class="name"> <img src="img3.jpg" /> <span> User User1</span> </td>
<td class="steps"> 3000 </td>
<td class="visual">
<div class="progress" style="opacity: 1">
<div class="progress-bar progress-bar-info" style="width: 1000%">
<span class="sr-only">20%</span>
</div>
</div>
</td>
</tr>
<tr class="empty"><td></td></tr>
<tr>
<td class="rank"> 2 </td>
<td class="name"> <img src="img1.jpg" /> <span> Another User</span> </td>
<td class="steps"> 2759 </td>
<td class="visual">
<div class="progress " style="opacity: .95">
<div class="progress-bar progress-bar-info" style="width: 95%">
<span class="sr-only">20%</span>
</div>
</div>
</td>
</tr>
<tr class="empty"><td></td></tr>
<tr>
<td class="rank"> 3 </td>
<td class="name"> <img src="img2.jpg" /> <span> AFirstName LastName</span> </td>
<td class="steps"> 2359 </td>
<td class="visual">
<div class="progress " style="opacity: 0.85">
<div class="progress-bar progress-bar-info" style="width: 85%">
<span class="sr-only">20%</span>
</div>
</div>
</td>
</tr>
<tr class="empty"><td></td></tr>
<tr>
<td class="rank"> 4 </td>
<td class="name"> <img src="img3.jpg" /> <span> Mohammed Ali</span> </td>
<td class="steps"> 2000 </td>
<td class="visual">
<div class="progress " style="opacity: .8">
<div class="progress-bar progress-bar-info" style="width: 80%">
<span class="sr-only">80%</span>
</div>
</div>
</td>
</tr>
<tr class="empty"><td></td></tr>
<tr>
<td class="rank"> 5 </td>
<td class="name"> <img src="img4.jpg" /> <span> Random Name</span> </td>
<td class="steps"> 1808 </td>
<td class="visual">
<div class="progress" style="opacity: 0.7">
<div class="progress-bar progress-bar-info" style="width: 70%">
<span class="sr-only">20%</span>
</div>
</div>
</td>
</tr>
<!-- More rows -->
</tbody>
</table>
</body>
</html>
。这就是全部。
这是我的css：
<!-- More rows here -->我确定问题出在我的CSS上，因此为什么我要包含所有的CSS，但经过1小时的调试后，这个bug仍然无法解决。
感谢无论谁通过所有css代码。
编辑：这是一个带有上述代码的jsFiddle：http://jsfiddle.net/m3omd6wL/1/
答案 0 :(得分：0)
请尝试这个。对我有用
var $table = $('table.table-wages');
$table.floatThead({
scrollingTop: 0,
useAbsolutePositioning: false,
scrollContainer: function($table){
return $table.closest('.table-wages-container');
}
});
// try to resize table thead. tr
$(".size-row,.floatThead-col").css("height", '48px');