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

问题描述

<块引用>

可能的重复:
带有固定标题的 HTML 表格?

正在寻找一种解决方案来创建具有可滚动主体和静态/固定标题的表格.

四处搜索似乎会产生许多片断的代码，要么不能在 IE 中工作，需要大量的 Javascript 和调整，要么是愚蠢的 CSS hacks 等.

老实说，如果是 CSS hacks 或 Javascript，我想我更愿意选择 Javascript 选项.

我猜的另一种方法是将它全部放在一个 div 中，然后滚动整个表格 - 但这有点无趣:D

解决方案

<tr><td>第1列</td><td>第2栏</td></tr><div style="overflow: auto;height: 100px; width: 320px;"><表格样式="宽度:300px;"cellpadding="0" cellpacing="0"><tr><td>值1</td><td>值2</td></tr><tr><td>值1</td><td>值2</td></tr><tr><td>值1</td><td>值2</td></tr><tr><td>值1</td><td>值2</td></tr><tr><td>值1</td><td>值2</td></tr><tr><td>值1</td><td>值2</td></tr>

这会创建一个固定的列标题，其下方是可滚动的表格.诀窍是将要滚动的表格嵌入到标签中，并将溢出属性设置为自动.当内表的内容大于周围的高度时，这将强制浏览器显示滚动条.

外部的宽度必须大于内部表格的宽度才能容纳滚动条.这可能很难完全正确，因为某些用户可能已将其滚动条设置为比默认值更宽或更小.但是，如果相差大约 20 到 30 个像素，您通常可以很好地显示滚动条.

CSS-Tricks 还讨论了使用 JavaScript 和 CSS 来帮助解决这个问题，以便您可以使用突出显示.这是该文章的链接.

Possible Duplicate:
HTML table with fixed headers?

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

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.

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

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>

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 .

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 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屋！