floatThead 影响标题的高度答案

【问题标题】：floatThead affecting height of headerfloatThead 影响标题的高度
【发布时间】：2019-07-08 13:17:51
【问题描述】：

我有一个带有表格的 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/

【问题讨论】：

你对父节点有明确的修正吗？如果您浮动标题中的所有元素，它将折叠。 Micro Clearfix
标题中唯一的内容是<tr> <td> </td> ... </tr>。只是一行，里面有一堆单元格。它们不是浮动的，但我知道表格中的行和单元格的行为与内联或块不同。
我没有使用该插件的经验，但我建议它浮动导致容器崩溃的元素。尝试将该 clearfix 类添加到父容器中。
没用。我搜索了 clearfix 并将其应用于父、和。它没有改变任何东西。
笨蛋，你能不能为你的代码创建一个jsFiddle，然后就可以看看了。