与第一个固定行的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