显示固定头的可滚动表格？ [英] Displaying a scrollable table with fixed head?

问题描述

我正在尝试做一些看似非常简单的事情，但它带给我

接近在键盘上砸我的头。我想要的只是一个表格，其中头部行是固定的，而下面的正文列是可滚动的（

普通的滚动条，不少）。无论我尝试什么，

头部和身体的列都没有对齐;宽度是独立计算的

，它给人一种完全粗糙的外观。


Michael


-

Michael Schuerig他们告诉你黑暗

mailto：mi ***** @ schuerig.de是伪装的祝福
http://www.schuerig.de/michael/ - 贾尼斯伊恩，从我到你

解决方案

Michael Schuerig写道：

我正在尝试做一些看似非常简单的事情，但它让我接近在键盘上砸我的头。我想要的只是一个表格，其中头部行是固定的，下面的主体列是可滚动的（带有普通滚动条，不少）。无论我尝试什么，
头部和身体的柱子都没有对齐;宽度是独立计算的
，它给人一种完全粗糙的外观。

Mozilla支持

tbody.scrollable {

身高：200px;

溢出：自动;

}


< table>

< thead>

< tr>

< th>无论/ th>

< / tr>

< / thead>


< tbody class =" scrollable">

<！ - rows go here - >

< / tbody>

< / table>


然后在需要时显示滚动条在Windows上，Opera 8和IE 6都不支持，但不确定Mac上的Safari或Konqueror上的
是什么。

-


Martin Honnen
http://javaScript.FAQTs.com/

文章< d6 ********** @ newsreader3.netcologne由Matchi.com提供回到>，

Michael Schuerig< mi ***** @ schuerig.de>写道：

我正在尝试做一些看似非常简单的事情，但它让我接近在键盘上砸我的头。我想要的只是一个表格，其中头部行是固定的，下面的主体列是可滚动的（带有普通滚动条，不少）。无论我尝试什么，
头部和身体的柱子都没有对齐;宽度是独立计算的
给出一个完全粗糙的外观。

听起来你正在使用两个单独的表格作为标题和正文。


使用一个表，其中的标题行包含在< thead>< / thead>中和< tbody>< / tbody>中的

正文。使用CSS，应用样式overflow：scroll;

和max-height;
可能无法在所有浏览器中使用，但会是什么？


-

= Eric Bustad，挪威单身汉程序员

Eric Kenneth Bustad写道：

文章< d6 ******* ***@newsreader3.netcologne.de>，
Michael Schuerig< mi ***** @ schuerig.de>写道：

我正在尝试做一些看似非常简单的事情，但它让我接近在键盘上砸我的头。我想要的只是一个表格，其中头部行是固定的，下面的主体列是可滚动的（带有普通滚动条，不少）。无论我尝试什么，
头部和身体的柱子都没有对齐;宽度是独立计算的，这使得外观看起来很粗糙。

听起来你正在使用两个单独的表格作为标题和正文。

使用一个表，标题行包含在< thead>< / thead>中和< tbody>< / tbody>中的
主体。使用CSS，应用样式
" overflow：scroll;"和max-height $ t $ b请查看< http：//www.schuerig.de/michael/layout/list.html>。

我想我已经做了你的建议，但它仍然没有工作

。好吧，这可能是由于固定和绝对的b
定位，但这正是我想要的。


迈克尔


-

Michael Schuerig保持不变，

mailto：mi ***** @ schuerig.de变化越小！
http://www.schuerig.de/michael/ - 摇滚陛下，摇滚陛下

I''m trying to do something seemingly very simple, but it''s brought me
close to crushing my head on the keyboard. All I want is a table where
the head row is fixed and the body columns below are scrollable (with
the ordinary scrollbars, no less). Whatever I try, the columns in the
head and the body aren''t aligned; the widths are computed independently
which gives a completely ragged look.

Michael

--
Michael Schuerig They tell you that the darkness
mailto:mi*****@schuerig.de Is a blessing in disguise
http://www.schuerig.de/michael/ --Janis Ian, From Me To You

解决方案

Michael Schuerig wrote:

I''m trying to do something seemingly very simple, but it''s brought me
close to crushing my head on the keyboard. All I want is a table where
the head row is fixed and the body columns below are scrollable (with
the ordinary scrollbars, no less). Whatever I try, the columns in the
head and the body aren''t aligned; the widths are computed independently
which gives a completely ragged look.

Mozilla supports
tbody.scrollable {
height: 200px;
overflow: auto;
}

<table>
<thead>
<tr>
<th>whatever/th>
</tr>
</thead>

<tbody class="scrollable">
<!-- rows go here -->
</tbody>
</table>

it then shows scrollbars when needed on the tbody.

On Windows neither Opera 8 nor IE 6 support that however, not sure what
Safari on the Mac or Konqueror on Linux do.
--

Martin Honnen
http://JavaScript.FAQTs.com/

In article <d6**********@newsreader3.netcologne.de>,
Michael Schuerig <mi*****@schuerig.de> wrote:

I''m trying to do something seemingly very simple, but it''s brought me
close to crushing my head on the keyboard. All I want is a table where
the head row is fixed and the body columns below are scrollable (with
the ordinary scrollbars, no less). Whatever I try, the columns in the
head and the body aren''t aligned; the widths are computed independently
which gives a completely ragged look.

Sounds like you are using two separate tables for the header and body.

Use one table, with the header rows enclosed in <thead></thead> and the
body in <tbody></tbody>. Using CSS, apply the styles "overflow:scroll;"
and "max-height" to the tbody.

May not work in all browsers, but what will?

--
= Eric Bustad, Norwegian bachelor programmer

Eric Kenneth Bustad wrote:

In article <d6**********@newsreader3.netcologne.de>,
Michael Schuerig <mi*****@schuerig.de> wrote:

I''m trying to do something seemingly very simple, but it''s brought me
close to crushing my head on the keyboard. All I want is a table where
the head row is fixed and the body columns below are scrollable (with
the ordinary scrollbars, no less). Whatever I try, the columns in the
head and the body aren''t aligned; the widths are computed
independently which gives a completely ragged look.

Sounds like you are using two separate tables for the header and body.

Use one table, with the header rows enclosed in <thead></thead> and
the
body in <tbody></tbody>. Using CSS, apply the styles
"overflow:scroll;" and "max-height" to the tbody.

Please have a look at <http://www.schuerig.de/michael/layout/list.html>.
I think I''m already doing what you suggest, but it doesn''t work
nonetheless. Well, this might be due to the fixed and absolute
positioning, but that''s exactly what I''m trying to get.

Michael

--
Michael Schuerig The more it stays the same,
mailto:mi*****@schuerig.de The less it changes!
http://www.schuerig.de/michael/ --Spinal Tap, The Majesty of Rock

这篇关于显示固定头的可滚动表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！