帶有可滾動行和固定標題的表格

我有this code根據this solution，但它似乎不適用於我。帶有可滾動行和固定標題的表格

我想能夠：

滾動的行
被固定
頭寬度設置爲與第一行TD頭。

我對JavaScript很新穎，所以我不知道我在想什麼。滾動部分正在工作，但不在jsfiddle中。如何使TH與TD的寬度相同？

編輯1：

代碼

<html> 
<head> 
    <style> 
     .outerDIV { 
      position: relative; 
      padding-top: 30px; //height of your thead 
     } 
     .innerDIV { 
      overflow: auto; 
      max-height: 200;  //the actual scrolling container 
     } 
     table thead { 
      display: block; 
      position: absolute; 
      top: 0; 
      left: 0; 
     } 
     table tbody { 
      display: block; 
     } 
    </style> 
    <script> 
     function scrollingTableSetThWidth(tableId) 
     { 
      var table = document.getElementById(tableId); 

      ths = table.getElementsByTagName('th'); 
      tds = table.getElementsByTagName('td'); 

      if(ths.length > 0) { 
       for(i=0; i < ths.length; i++) { 
        ths[i].style.width = getCurrentComputedStyle(tds[i], 'width'); 
       } 
      } 
     } 

     function getCurrentComputedStyle(element, attribute) 
     { 
      var attributeValue; 
      if (window.getComputedStyle) 
      { // class A browsers 
       var styledeclaration = document.defaultView.getComputedStyle(element, null); 
       attributeValue = styledeclaration.getPropertyValue(attribute); 
      } else if (element.currentStyle) { // IE 
       attributeValue = element.currentStyle[vclToCamelCases(attribute)]; 
      } 
      return attributeValue; 
     } 
    </script> 

</head> 
<body> 
    <div class="outerDIV"> 
     <div class="innerDIV"> 
      <table border="1"> 
       <thead> 
        <tr> 
         <div><th>Column1</th><th>Column2</th><th>Column3</th></div> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>Line1Cell1</td><td>Line1Cell2</td><td>Line1Cell3</td> 
        </tr> 
        <tr> 
         <td>Line2Cell1</td><td>Line2Cell2</td><td>Line2Cell3</td> 
        </tr> 
        <tr> 
         <td>Line3Cell1</td><td>Line3Cell2</td><td>Line3Cell3</td> 
        </tr> 
        <tr> 
         <td>Line4Cell1</td><td>Line4Cell2</td><td>Line4Cell3</td> 
        </tr> 
        <tr> 
         <td>Line5Cell1</td><td>Line5Cell2</td><td>Line5Cell3</td> 
        </tr> 
        <tr> 
         <td>Line6Cell1</td><td>Line6Cell2</td><td>Line6Cell3</td> 
        </tr> 
        <tr> 
         <td>Line7Cell1</td><td>Line7Cell2</td><td>Line7Cell3</td> 
        </tr> 
        <tr> 
         <td>Line8Cell1</td><td>Line8Cell2</td><td>Line8Cell3</td> 
        </tr> 
        <tr> 
         <td>Line9Cell1</td><td>Line9Cell2</td><td>Line9Cell3</td> 
        </tr> 
        <tr> 
         <td>Line10Cell1</td><td>Line10Cell2</td><td>Line10Cell3</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</body> 
</html>

來源

2014-05-21 Ionut

請至少包含一些您的代碼。 –

@CristianCiupitu是的，我只是把代碼。 – Ionut

你可以做這樣的事情，但寬度列可以打破任何時間。 http://jsfiddle.net/MVxZb/9/ –

您需要給width設置absolute位置的元素。

爲了更好地觀察寬度，應該減小〜1 em（滾動條的平均寬度）。

enter image description here

如果所有列的寬度同樣蔓延，你可以做這樣的事情：http://jsfiddle.net/MVxZb/9/

.outerDIV { 
    position: relative; 
    padding-top: 30px; 
    display:inline-block; 
} 
.innerDIV { 
    overflow: auto; 
    max-height: 150px; 
    padding-right:1.1em; 
    margin-right:-1.1em; 
} 
table thead { 
display:table; 
    width:100%; 
    border:solid 1px gray; 
    box-sizing:border-box; 
    position: absolute; 
    border-bottom:0; 
    top: 0; 
    left: 0; 
    right:0; 
}

可以使用table-layout:fixed;流傳甚寬的列，如果日和TDS有沒有寬度設置。

來源

2014-05-21 18:14:04

您的滾動不工作的原因是因爲你沒有在你的.innerDiv MAX-height屬性的任何單位。

如果您可以通過CSS設置<th>和<td>單元格的寬度，那麼爲了使表頭的寬度與表格匹配，您不需要javascript。

看到這個：http://jsfiddle.net/MVxZb/10/

編輯：更新的鏈接。忘了刪除不必要的JavaScript。

來源

2014-05-21 18:10:16 chapeljuice

感謝它很好。還有一件事是有什麼簡單的方法來移動滾動條靠近表體？ – Ionut

還有很多其他的方法可以做到這一點，但如果我們只是把你編寫的代碼寫入並修改它，你可以在outerDiv上設置一個等於''寬度總和的寬度，然後將innerDiv設置爲寬度：100％，[像這樣的東西]（http://jsfiddle.net/MVxZb/14/） – chapeljuice

你的問題不是JavaScript是HTML 你需要你的頭，你的表在2個不同的容器分開沒有SAM容器下分組頭的TBODY所以基本上你可以做

<div style="width:200px"> 
<table style="width:100%"> 
    <tr><th>header</th></tr> 
</table> 
<div> 
<div style="width:200px; height:100px; overflow:auto"> 
    <table style="width:100%"> 
     <tr> 
     <td>value</td> 
     </tr> 

    </table> 
<div>

像每當我需要保持固定的表我用這個的頭在這裏

http://jsfiddle.net/MVxZb/12/

來源

2014-05-21 18:16:30

實例闡述。我也很欣賞其他解決方案。

這裏是fiddle。

table th, 
table td { 
    padding: 10px; 
    width: 100px; 
} 

.fixed-header{ 
    position: fixed; 
    background: #fff; 
} 
.container{ 
    height: 402px; 
    overflow: auto; 
}

來源

2014-05-21 18:17:06

帶有可滾動行和固定標題的表格

回答

相關問題