jquery - floatThead 影响标题的高度

我有一个带有表格的 html 页面，我在其中使用了这个 JQuery 插件:http://mkoryak.github.io/floatThead/

当 floatThead 发挥作用时，我的标题会缩小。这是我的代码:

    <!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>

我实际上已经删除了大部分 html 代码。基本上我放了很多行  .就这样。

这是我的CSS:

body{
  background-color: #E0F2F7;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #333333;
  font-size: 2em;
}

table.main-table td.rank, table.main-table th.ranktitle{ border-left: solid 1px #CCCCCC; }
table.main-table td.visual, table.main-table th.visualtitle{ border-right: solid 1px #CCCCCC; }

td { border-bottom: solid 1px #CCCCCC; }

@media screen and (min-width: 1280px){
  table.main-table td.rank, table.main-table th.ranktitle{ border-left: solid 2px #CCCCCC; }
  table.main-table td.visual, table.main-table th.visualtitle{ border-right: solid 2px #CCCCCC; }
  td { border-bottom: solid 2px #CCCCCC; }
}

@media screen and (min-width: 1960px){
  table.main-table td.rank, table.main-table th.ranktitle{ border-left: solid 3px #CCCCCC; }
  table.main-table td.visual, table.main-table th.visualtitle{ border-right: solid 3px #CCCCCC; }
  td { border-bottom: solid 3px #CCCCCC; }
}

@media screen and (min-width: 2560px){
  table.main-table td.rank, table.main-table th.ranktitle{ border-left: solid 4px #CCCCCC; }
  table.main-table td.visual, table.main-table th.visualtitle{ border-right: solid 4px #CCCCCC; }
  td { border-bottom: solid 4px #CCCCCC; }
}

html, body{
  height: 100%;
}

table.main-table{
  width: 98%;
  margin: auto;
  height: 100%;
}

table.main-table tr{
  box-shadow: 10px 10px 5px #888888;
  margin-bottom: 1%;
}

table.main-table tr, table.main-table td{
  min-width: 10%;
}

thead{
  width: 100%;
  height: 15%;
}

tbody{
  height: 85%;
  width: 100%;
}

table.main-table, table.main-table th{
  text-align: center;
}

table.main-table tr.LeaderboardHeader{
  height: 100%;
  background-image: linear-gradient(to bottom, #CCCCCC 0%, #999999 100%);
  font-weight: normal;
  margin: auto;
}

table.main-table th{
  padding: 0.25% 0;
  height: 100%;
}

table.main-table td{
  padding: 0.25% 0;
  background-image: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 100%);
}

table.main-table th.ranktitle{
  text-align: right;
  width: 3%;
  padding-right: 0.5%;
}

table.main-table th.nametitle{
  width: 45%;
}

table.main-table th.visualtitle{
  width: 37%;
  text-align: left;
  padding-right: 2%;
}

table.main-table th.steptitle{
  width: 15%;
  padding-right: 2%;
}

table.main-table td.rank{
  text-align: right;
  width: 3%;
  padding-right: 0.5%;
  text-align: right;
}

table.main-table td.name{
  text-align: left;
}

table.main-table td.name span{
  padding-left: 5%;
}

table.main-table td.steps{
  font-weight: bold;
  text-align: right;
  padding-right: 2%;
}

table.main-table td.visual{
    padding-right: 2%;
}

table.main-table td.name img{
  width: 60px;
  height: 60px;
}

.progress{
  margin: auto;
  height: 60px;
}

/* Shadows */

td{
  box-shadow: 5px 5px 5px #555555;
}

tr.empty{
  opacity: 0;
  height: 100%;
  }

tr.empty td, div{
  height: 16px;
}

我确定问题出在我的 css 上，因此我包含了所有的 css，但在调试 1 小时后，这个错误仍然困扰着我。

感谢检查所有这些 CSS 代码的人。

编辑:这是一个带有上述代码的 jsFiddle:http://jsfiddle.net/m3omd6wL/1/

最佳答案

请试试这个。它对我有用

  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');

关于jquery - floatThead 影响标题的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30890267/

jquery - floatThead 影响标题的高度

上一篇：css - 如何定义CSS分层顺序？

下一篇：html - 为什么 html 按钮在 tablecell 中的位置在 Firefox 中不同