<table><tbody>可滚动? [英] <table><tbody> scrollable?

问题描述

我想要一张右边有滚动条的表格.
我想在没有任何插件(jQuery)的情况下仅使用 css 来完成此操作.
表头应该保持固定.

I would like to have a table with a scrollbar to the right.
I want to accomplish this without any plugins(jQuery) just with css.
The table header is supposed to stay fixed.

我需要做什么才能使其正常工作?

What do I need to do to get this working?

推荐答案

您承担了一项任务，如果您成功，您将成为英雄.我试过这个和直截了当的事情——定位:固定； -- 是不可能的.我不得不将所有的 复制到一个新对象中.但是，当您这样做时， 元素的水平间距将全部消失，因此标题不再与 对齐.我最终做了这样的事情:

You have taken on a task that, if you succeed, will make you a hero. I tried this and the straightforward thing -- to position:fixed; the <thead> -- is impossible. I had to copy all of the <thead> into a new object. But when you do that, the horizontal spacing of the <th> elements all goes away so the headings don't line up with the <td>s anymore. I ended up doing something like this:

首先放弃ie6和ie7.那些家伙没希望了.

First of all, abandon ie6 and ie7. There's no hope for those guys.

1. 制作表格的两份副本，一份是身体不可见而 可见的地方，另一份是相反的.

1. Make two copies of the table, one where the body is invisible and the <thead> is visible, and the other where it's vice-versa.

给出 z-index:1;到带有可见 的表.

Give z-index:1; to the table with the visible <thead>.

给 z-index:0;到带有可见 的表.

Give z-index:0; to the table with the visible <tbody>.

处理水平滚动，但直到你发现onScroll不是ie8事件(更不用说ie6)，这样你就必须每隔十分之一秒左右休息一次setInterval>只是处理ie8中的左右滚动.

Deal with horizontal scrolling, but not until after you find that onScroll isn't an ie8 event (not to mention ie6), so that you have to take a setInterval break every tenth of a second or so just to handle scrolling the <thead> left and right in ie8.

这会给你一个在两个轴上无限滚动的表格体，一个只在 x 轴上滚动的表格头.几乎适用于 FF、Chrome 和 Safari.但是在ie8中摇摇欲坠.真正的皮塔饼.

This will give you a table body of infinite scroll in both axes, with a table head that scrolls in the x axis only. Pretty much works in FF, Chrome, and Safari. But is shaky in ie8. A real pita.

祝你好运，如果你成功了，请写信！

Good luck, and please write if you get this to work!

这篇关于&lt;table&gt;&lt;tbody&gt;可滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！