使引導表中的表展開到頁面的整個高度

我試圖讓我的引導程序站點中的表展開到當前頁面的整個高度，但是我做什麼只能擴展到大約一半的頁面而不是更進一步。使引導表中的表展開到頁面的整個高度

不知道如何做到這一點。所以我發佈了下面的表格，如果你需要更多的信息讓我知道。

<html> 
 
<head> 
 
\t <!-- Latest compiled and minified CSS --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
\t <!-- Optional theme --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
 

 
\t <!-- Latest compiled and minified JavaScript --> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
\t <style rel="stylesheet" src="./css/style.css"></style> 
 

 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
\t <script rel="text/JavaScript"> 
 
\t \t var h = window.innerHeight; 
 
\t \t var rows = document.getElementsByTagName('tr'); 
 
\t \t for (var i = 0; i < rows.length; i++) { 
 
\t \t  var height = h/rows.length; 
 
\t \t  rows[i].style.height = String(height) + 'px'; 
 
\t \t } 
 
\t </script> 
 
</head> 
 

 
<body> 
 
\t <div class="container-fluid"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-12"> 
 
\t \t \t \t <table class="table table-bordered "> 
 
\t \t \t \t \t <thead> 
 
\t \t \t \t  <tr style="height:100%"> 
 
\t \t \t \t   <th>Category One</th> 
 
\t \t \t \t   <th>Category Two</th> 
 
\t \t \t \t   <th>Category Three</th> 
 
\t \t \t \t   <th>Category Four</th> 
 
\t \t \t \t   <th>Category Five</th> 
 
\t \t \t \t  </tr> 
 
\t \t \t \t  </thead> 
 
\t \t \t \t  <tbody > 
 
\t \t \t \t  <tr> 
 
\t \t \t \t   <td><a href="#">100</a></td> 
 
\t \t \t \t   <td><a href="#">100</a></td> 
 
\t \t \t \t   <td><a href="#">100</a></td> 
 
\t \t \t \t   <td><a href="#">100</a></td> 
 
\t \t \t \t   <td><a href="#">100</a></td> 
 
\t \t \t \t  </tr> 
 
\t \t \t \t  <tr> 
 
\t \t \t \t   <td><a href="#">200</a></td> 
 
\t \t \t \t   <td><a href="#">200</a></td> 
 
\t \t \t \t   <td><a href="#">200</a></td> 
 
\t \t \t \t   <td><a href="#">200</a></td> 
 
\t \t \t \t   <td><a href="#">200</a></td> 
 
\t \t \t \t  </tr> 
 
\t \t \t \t  <tr> 
 
\t \t \t \t   <td><a href="#">300</a></td> 
 
\t \t \t \t   <td><a href="#">300</a></td> 
 
\t \t \t \t   <td><a href="#">300</a></td> 
 
\t \t \t \t   <td><a href="#">300</a></td> 
 
\t \t \t \t   <td><a href="#">300</a></td> 
 
\t \t \t \t  </tr> 
 
\t \t \t \t  <tr> 
 
\t \t \t \t   <td><a href="#">400</a></td> 
 
\t \t \t \t   <td><a href="#">400</a></td> 
 
\t \t \t \t   <td><a href="#">400</a></td> 
 
\t \t \t \t   <td><a href="#">400</a></td> 
 
\t \t \t \t   <td><a href="#">400</a></td> 
 
\t \t \t \t  </tr> 
 
\t \t \t \t  <tr> 
 
\t \t \t \t   <td><a href="#">500</a></td> 
 
\t \t \t \t   <td><a href="#">500</a></td> 
 
\t \t \t \t   <td><a href="#">500</a></td> 
 
\t \t \t \t   <td><a href="#">500</a></td> 
 
\t \t \t \t   <td><a href="#">500</a></td> 
 
\t \t \t \t  </tr> 
 
\t \t \t \t  </tbody> 
 
\t \t \t \t </table> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

來源

2015-05-18 jmurphy1267

根據您的描述，我猜測你想要的錶行拓展到窗口高度的百分比的基礎上的行數。這是一個相當簡單的方式來做到這一點使用JavaScript/jQuery的：

var h = window.innerHeight; 
var rows = $('tr'); 
for (var i = 0; i < rows.length; i++) { 
    var height = h/rows.length; 
    $(rows[i]).css('height', String(height) + 'px'); 
}

Here是的jsfiddle這表明它在行動。高度並不完美，但它是一個體面的起點。這是你想要的？

編輯：

代碼是否在控制檯中拋出任何錯誤？一種可能性是jQuery可能不包括在內。如果是這樣的話，這裏是一個純JavaScript解決方案：

var h = window.innerHeight; 
var rows = document.getElementsByTagName('tr'); 
for (var i = 0; i < rows.length; i++) { 
    var height = h/rows.length; 
    rows[i].style.height = String(height) + 'px'; 
}

來源

2015-05-18 04:11:09 Pred

我想在我的HTML文檔添加這個腳本，它仍然沒有影響到每一行的高度。 – jmurphy1267

我用純JavaScript解決方案編輯答案。如果這仍然不起作用，請儘可能提供一些額外的細節;看看控制檯日誌是否拋出任何錯誤（使用「開發工具」，通常可以通過「F12」熱鍵訪問）。另外，您使用的是哪種瀏覽器，並且您是否包含任何其他CSS或JS文件？ jsfiddle（包含在答案中）是否準確地顯示行，如你所願？ – Pred

我有引導程序和查詢cdn與只有背景顏色的樣式表。 – jmurphy1267

使引導表中的表展開到頁面的整個高度

回答

相關問題