Bug 3239 – overflow: auto should work on table sections (tbody scroll)

• Status: NEW
• Component: Tables

[Dave Hyatt]

11/9/03 3:45 PM Jonathan Barbero:
* SUMMARY
It would be nice if Safari implemented the independent scrolling properties of THEAD, TBODY, and TFOOT 
table elements.  My understanding is that if the content within TBODY tags exceeds the table height, that 
said contents will receive scroll bars independent of the rows contained within THEAD tags.  The spec is 
described here:

http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.3

[Dave Hyatt]

Apple Bug: rdar://3478312/

[Joost de Valk (AlthA)]

Created attachment 2202 [details]
Testcase

Added a table in here with inline heights and css-styled heights, enjoy! :)

[Eric Seidel (no email)]

Beth was fixing code in this area very recently.  However I believe her work had to do with <td>'s instead 
of table regions (dave and beth would both know).  I would also note that we have the exact same 
rendering of the test case as does firefox.  So it's possible that either the test case is wrong or that both 
firefox and safari are "wrong" (in which case I'm not sure we'd want to change this.. at least not without 
checking WinIE).

[Gérard Talbot (no longer involved)]

This page
http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html#test1
is a testcase on table section overflow from WAI.

[Gérard Talbot (no longer involved)]

Other testcase:

http://www.gtalbot.org/BrowserBugsSection/Opera9Bugs/Opera7BugTbodyOverflowAuto.html

Can someone add these 2 string/words into summary so that it can help searching+finding this bug:

scroll tbody

I do not have sufficient powers to edit summary :(

[Terje Bless]

Firefox 2.0.0.12 renders the test cases from Comment #4 and Comment #5 correctly (with scrollbars on tbody). Safari 3.0.4/5523.15 (the 10.5.2 release version) does not. I haven't checked nightlies.

[Asad Zia]

Created attachment 25570 [details]
Scrollbars should appear on tbody.

The previous test case did not demonstrate the use case discussed in this bug. I have reduced a test case from Comment #4 below that correctly reproduces the issue.

[Cameron Zwarich (cpst)]

*** Bug 24974 has been marked as a duplicate of this bug. ***

[Gérard Talbot (no longer involved)]

Recently, I discovered that this is not a CSS 2.1 bug. The overflow property does not apply to table-row-group objects (like <tbody>) according to section 11.1.1 http://www.w3.org/TR/CSS21/visufx.html#overflow

regards, Gérard

[Jørn Holm]

Even if overflow property does not apply to table-row-group objects, 
http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3
says: "Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot."

[Jørn Holm]

Created attachment 50731 [details]
Test case for table with 100% width

jet another test case.
This one illustrates how nicely a table can resize with ellipsis on table cells, and hopefully in a near future, scrolling on tbody.

If it is not a bug is it possible to make it a feature request (legitimate one as W3C encourages this behaviour)
It is really a big bonus for long tables and works perfect in Firefox.
It is very complicated to achieve it with javascript as no browser behaves the same with scroll bar width.

I'd love to see this added as a feature. It's basically impossible to do right now and have native column widths..

[Þorgils Völundarson]

Would really like to see this feature asap. Any word on when this could possibly be fixed?

[Joe Nelson]

I would like to see this feature as well, please. It is useful behavior for long tables.

[Gérard Talbot (no longer involved)]

(In reply to comment #10)
> Even if overflow property does not apply to table-row-group objects, 
> http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3
> says: "Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot."

To my knowledge, no testcase has ever been submitted with regards to this.
HTML 4.01 spec has not been maintained nor updated after its final release in dec. 1999.

There is no indication so far that HTML5 is going to suggest or state that scrolling bodies can be achieved independently of <thead> and <tfoot>:

HTML 5, section 4.9.1 Tabular data
http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#tabular-data 

HTML 5, section 4.9.5 The tbody element
http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-tbody-element


(In reply to comment #12)
> If it is not a bug 

It is not a CSS 2.1 spec violation. Overflow property does not apply to table-row-group objects (like <tbody>).

> It (...) works perfect in Firefox.

It does not work perfect in Firefox 5 and 6. Mozilla developers intentionally decided to make overflow property implemented in compliance with CSS 2.1. There is a mozilla bug report to that effect.

> It is very complicated to achieve it with javascript as no browser behaves 
> the same with scroll bar width.

You are right. It is moderately complicated with javascript but the main layout problem for web authors is that no web author can easily predict in advance the scrollbar width in various browsers, browser versions and even browser themes. 

The scrollbar width is and should be fundamentally under the full control of the user; it is definitely an accessibility issue that belongs to the user. I personally use Linux KDE and can (and I have in fact) configure such width. A scrollbar width of 15px is too narrow for me; I've set it to 19px and then to 21px for easier control, confort.

Gérard

Per http://www.w3.org/TR/css3-box/#overflow0, overflow applies to "non-replaced block-level elements and non-replaced ‘inline-block’ elements" (meaning it doesn't apply to img, object, and the like). A block-level box includes "all table boxes" (like table-row-group and table-column-group). Thus, overflow applies to all table boxes, including <tbody>.

Though no browser currently implements an overflow:scroll ability (tested Chr16, FF9, IE9, O11.6), a table with a <tbody> and a <colgroup> should be able to use CSS3 to create a frozen panes effect.

[Karl Dubost]

rdar://3478312

[Karl Dubost]

None of the browsers implements this. 
https://codepen.io/webcompat/pen/bGZrqPm

Though it's a very frequent question on stack overflow and articles.

[Karl Dubost]

In https://drafts.csswg.org/css-tables-3/#global-style-overrides (currently not ready for implementation)
> The overflow property on the table-root and table-wrapper box, when its value is not either visible, clip or hidden, is ignored and treated as if its value was visible.

In https://drafts.csswg.org/css-tables-3/#table-structure
> table-row-group (equivalent to HTML: <tbody>)

In https://drafts.csswg.org/css-display-4/#valdef-display-table-row-group
> table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column
> The element is an internal table element. It generates the appropriate internal table box which participates in a table formatting context. See CSS2§17.2 [CSS2].

In https://www.w3.org/TR/CSS2/tables.html#table-display ()
> table-row-group (In HTML: TBODY)
> Specifies that an element groups one or more rows.