表 - 固定标题，可滚动体，最健壮/简单的解决方案？ [英] Table - fixed header, scrollable body, most robust/simple solution?

问题描述

可能重复：

带有固定标题的HTML表格？

创建一个包含可滚动主体和静态/固定标头的表格。

Looking for a solution to create a table with a scrollable body, and a static/fixed header.

搜索会产生多个片段的代码，不工作在IE，需要大量的Javascript和调整，或一个愚蠢的数量的CSS hacks等。

Searching around seems to produce MANY flaky pieces of code, either not working in IE, requiring a huge amount of Javascript and tweaking, or a silly amount of CSS hacks etc.

说实话，如果它是一个CSS黑客Javascript，我想我更喜欢去使用Javascript选项。

To be honest, if it's a case of CSS hacks or Javascript, I think I'd prefer to go the Javascript option.

另一个我想是将它放在一个div，只滚动整个表 - 这是有点naff：D

The alternative I guess is to place it all in a div, and just scroll the entire table - but that's a bit naff :D

推荐答案

<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
  <td>Column 1</td>
  <td>Column 2</td>
</tr>
</table>

<div style="overflow: auto;height: 100px; width: 320px;">
  <table style="width: 300px;" cellpadding="0" cellspacing="0">
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  </table>
</div>

这将创建一个固定的列标题，诀窍是将要滚动的表嵌入到overflow属性设置为auto的标签中。这将强制浏览器在内部表的内容大于周围环境的高度时显示滚动条。

This creates a fixed column header with the scrollable table below it. The trick is to embed the table you want to scroll in a tag with the overflow attribute set to auto. This will force the browser to display a scrollbar when the contents of the inner table are larger than the height of the surrounding .

外部的宽度必须大于width如果内部表适应滚动条。这可能很难正确，因为一些用户可能已设置他们的滚动条比默认更宽或更小。

The width of the outer must be larger than the width if the inner table to accommodate for the scrollbar. This may be difficult to get exactly right, because some users may have set their scrollbars to be wider or smaller than the default. However, with a difference of around 20 to 30 pixels you'll usually be able to display the scrollbar just fine.

CSS-Tricks还谈到了使用JavaScript和CSS的方法，帮助这个以及所以你可以使用突出显示。以下是文章的链接。

CSS-Tricks also talks about using JavaScript and CSS to help with this as well so you can use highlighting. Here is the link to that article.

这篇关于表 - 固定标题，可滚动体，最健壮/简单的解决方案？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！