固定THEAD犯規比賽TBODY

-3

我有我的代碼示例保存在https://jsfiddle.net/n7ynjs1t/固定THEAD犯規比賽TBODY

所有我需要的是一個簡單的普通表甚至THEAD固定在滾動。

CSS：

table { 
    width: 100%; 
} 

thead { 
    width: 100%; 
    display: table; 
} 

tbody { 
    overflow: auto; 
    height: 200px; 
    display: block; 
} 

td { 
    width: 100px; 
}

HTML：

<thead> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> head1 </td> 
    <td width=100 align='center'> head2 </td> 
    <td width=100 align='center'> head3 </td> 
    <td width=100 align='center'> head4 </td> 
    <td width=100 align='center'> head5 </td> 
    <td width=100 align='center'> head6 </td> 
    <td width=100 align='center'> head7 </td> 
    <td width=100 align='center'> head8 </td> 
    <td width=100 align='center'> head9 </td> 
    <td width=100 align='center'> head10</td> 
    <td width=100 align='center'> head11</td> 
</thead> 
<tr> 
    <td width=100 align='center'> id </td> 
    <td width=100 align='center'> 1 </td> 
    <td width=100 align='center'> 2 </td> 
    <td width=100 align='center'> 3 </td> 
    <td width=100 align='center'> 4 </td> 
    <td width=100 align='center'> 5 </td> 
    <td width=100 align='center'> 6 </td> 
    <td width=100 align='center'> 7 </td> 
    <td width=100 align='center'> 8 </td> 
    <td width=100 align='center'> 9 </td> 
    <td width=100 align='center'> 0 </td> 
    <td width=100 align='center'> 11</td> 
</tr> 

// The same table rows repeats many times 

</tbody> 
</table>

來源

2016-11-20 Amjad I. Bawarshi

表格的佈局+平均1.2em的滾動條https://jsfiddle.net/n7ynjs1t/4/應做它看到http://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll/23989771#23989771甚至可能是一個副本 –

請提供一個[mcve] –

你錯過了''內的''，並且您知道'中的單元格元素'不是''而是''，對不對？你爲什麼要把'width'和'align'放在桌子本身？只需使用CSS？由於它們尺寸完全相同，因此解決這個問題應該非常簡單。 – junkfoodjunkie

我想你會得到最接近的是這樣的。

您將無法「自動調整」表格單元格的標題，反之亦然，因此這些寬度應該是「硬編碼」的。

此外，爲了使標題「適合」並彌補身體的滾動條，添加填充。在下面的代碼中，我爲「thead」添加了「15px」的填充，該填充沒有滾動條。

編輯：這裏有一個小提琴：https://jsfiddle.net/FredM7/25abq8gf/

看到這個完整的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <style> 
      table { 
       width: 200px; 
       background: green; 
      } 

      table tbody, table thead 
      { 
       display: block; 
      } 

      table thead 
      { 
       padding-right: 15px; 
      } 

      table tbody 
      { 
       overflow: auto; 
       height: 100px; 
      } 

      thead th, tbody td { 
       width: 72px; 
       text-align: left; 
      } 
     </style> 
    </head> 
    <body> 
     <table> 
      <thead> 
       <tr> 
        <th> 
         Head 1 
        </th> 
        <th> 
         Head 2 
        </th> 
        <th> 
         Head 3 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>1</td><td>2</td><td>3</td> 
       </tr> 
       <tr> 
        <td>1</td><td>2</td><td>3</td> 
       </tr> 
       <tr> 
        <td>1</td><td>2</td><td>3</td> 
       </tr> 
       <tr> 
        <td>1</td><td>2</td><td>3</td> 
       </tr> 
       <tr> 
        <td>1</td><td>2</td><td>3</td> 
       </tr> 
       <tr> 
        <td>1</td><td>2</td><td>3</td> 
       </tr> 
       <tr> 
        <td>1</td><td>2</td><td>3</td> 
       </tr> 
       <tr> 
        <td>1</td><td>2</td><td>3</td> 
       </tr> 
       <tr> 
        <td>1</td><td>2</td><td>3</td> 
       </tr> 
       <tr> 
        <td>1</td><td>2</td><td>3</td> 
       </tr> 
      </tbody> 
     </table> 
    </body> 
</html>

來源

2016-11-20 22:13:45

固定THEAD犯規比賽TBODY

回答

相關問題