與第一個固定行的Html表

Question

我正在嘗試使第一個固定行的表。我的標記是：

<table> 
    <thead> 
    .... 
    </thead> 

    <tbody> 
    ... 
    </tbody> 
</table> 

我設置overflow和max-height爲tbody，但滾動不會出現。如果我將display:block添加到tbody，但是以這種方式，我將得到寬度= tableWidth/2的tbody，如何使tbody display : block和全寬？

謝謝。

Answer 1

儘量把CSS下方在要固定行：

CSS

style="position:fixed;top:0;background:#FFF;" 

例：http://jsfiddle.net/V84PE/1/

Answer 2

如果想即時通訊的權利，你想要什麼請嘗試下面的內容。

Demo Fiddle

HTML

<table> 
    <thead> 
     <tr> 
      <td>Header1</td> 
      <td>Header2</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
     <tr> 
      <td>Content</td> 
      <td>Content</td> 
     </tr> 
    </tbody> 
</table> 

CSS

table { 
    background-color: #aaa; 
    width:100%; 
} 
tbody { 
    background-color: #ddd; 
    height: 100px; 
    overflow: auto; 
} 
td { 
    padding: 3px 10px; 
} 
thead > tr, tbody { 
    display:block; 
} 

Answer 3

您可以使用first-child此：

table tr:first-child td { 
    position: fixed; 
    top: 0; 
} 

您還可以使用last-child。

更多css功能：http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048