Make TBODY scrollable in Webkit browsers
I'm aware of this question, but none of the answers work in Safari, Chrome, etc.
The accepted strategy (as demonstrated here) is to set the tbody height and overflow properties like so:
<table>
<thead>
<tr><th>This is the header and doesn't scroll</th></tr>
</thead>
<tbody style="height:100px; overflow:auto;">
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
<tr><td>content that scrolls</td></tr>
</tbody>
</table>
Unfortunately, this does not work in any webkit browsers. There is a bug report about it that doesn't seem to be a high priority (reported June 05).
So my question is: are there alternate strategies that do actually work? I've tried the two-table approach, but it's impossible to guarantee that the header will line up with the content. Do I just have to wait for Webkit to fix it?
Here is a working example:
http://www.imaputz.com/cssStuff/bigFourVersion.html
You have to add the display:block to the thead > tr and tbody
Using the display:block style only works if you have 1 column. If you have multiple data columns - with multiple fields - then display:block appears to make all data columns scrollable but under the 1st column (does the same in Firefox - which is the only browser I know that does tbody scrolling nicely). Incidentally, on Firefox - you can use the overflow-x: hidden style to suppress the horizontal scroll.
I realized that the issue I mention only occurs if you are not specifying a width for the th & td elements - if you can fix the column widths then it works. Problem for me is I can't fix the column widths.
试试这个页面的第一种方法，纯CSS与单个表格（表格中的2个div，并且该位置是绝对的）：http://www.cssplay.co.uk/menu/tablescroll.html似乎可以使用FF4 / IE9 / IE8除了IE7 / FF3.6之外。
链接地址: http://www.djcxy.com/p/88284.html上一篇: 当结构不连贯时如何用css来近似表格布局