<!DOCTYPE html> makes table <thead> scroll
Hi web developers,
Last week I stumbled upon a strangety in HTML/CSS which confuses me. The only difference between the following 2 webpages is that the 1st one has a "<!DOCTYPE html>" line, and the 2nd one doesn't.
http://filestore.c1.biz/ee/29199241/table_tbody_scroll1.htm
http://filestore.c1.biz/ee/29199241/table_tbody_scroll2.htm
My questions for you are:
Q1. I would have thought that in the 1st example the browser would know to treat it as HTML5, while in the 2nd example it would have to guess. Right?
Q2. Please explain exactly why the header <thead> line scrolls with the details <tbody> lines in the 1st example, but stay basically stationary in the 2nd example.
Update, here's a 3rd question:
Q3. How would I need to change the 1st example so that it works as the 2nd example does (i.e. table header line stays stationary), without removing the <!DOCTYPE html> line (i.e. in HTML5)?
Please number your answers accordingly for clarity.
Thanks.
Tel2.
Last week I stumbled upon a strangety in HTML/CSS which confuses me. The only difference between the following 2 webpages is that the 1st one has a "<!DOCTYPE html>" line, and the 2nd one doesn't.
http://filestore.c1.biz/ee/29199241/table_tbody_scroll1.htm
http://filestore.c1.biz/ee/29199241/table_tbody_scroll2.htm
My questions for you are:
Q1. I would have thought that in the 1st example the browser would know to treat it as HTML5, while in the 2nd example it would have to guess. Right?
Q2. Please explain exactly why the header <thead> line scrolls with the details <tbody> lines in the 1st example, but stay basically stationary in the 2nd example.
Update, here's a 3rd question:
Q3. How would I need to change the 1st example so that it works as the 2nd example does (i.e. table header line stays stationary), without removing the <!DOCTYPE html> line (i.e. in HTML5)?
Please number your answers accordingly for clarity.
Thanks.
Tel2.
when run thıs from console...
javascript:window.alert('You are in ' + (document.compatMode==='CSS1Compat'?'Standards':'Quirks') + ' mode.')ASKER
Thanks HainKurt,
My original post asked that you "Please number your answers accordingly for clarity".
I think you're basically saying "yes" to my Q1 (with the clarification that it's quirks mode), but I've asked for experts to "Please explain exactly why..." in Q2. I can see it's rendering differently, and it seems to be something to do with the difference in HTML5 rendering, but I'm wanting to know exactly, so I can hopefully fix it so it works with the <!DOCTYPE html> line in place.
Thanks.
My original post asked that you "Please number your answers accordingly for clarity".
I think you're basically saying "yes" to my Q1 (with the clarification that it's quirks mode), but I've asked for experts to "Please explain exactly why..." in Q2. I can see it's rendering differently, and it seems to be something to do with the difference in HTML5 rendering, but I'm wanting to know exactly, so I can hopefully fix it so it works with the <!DOCTYPE html> line in place.
Thanks.
adding "<!DOCTYPE html>" makes it HTML5
if it is missing, browser goes into QUIRKS mode and it is rendered differently on different kinds of browsers...
if it is missing, browser goes into QUIRKS mode and it is rendered differently on different kinds of browsers...
so,
Q1: Yes, no guessing... it is QUIRKS mode...
Q2: in QUIRKS mode, it is different than HTML5, the div height is adjusted to height of window
and table is short, so there are some space after table...
you want what is rendered differently in quirks mode?
have a look at here
https://www.quirksmode.org/css/quirksmode.html
Q1: Yes, no guessing... it is QUIRKS mode...
Q2: in QUIRKS mode, it is different than HTML5, the div height is adjusted to height of window
and table is short, so there are some space after table...
you want what is rendered differently in quirks mode?
have a look at here
https://www.quirksmode.org/css/quirksmode.html
ASKER
I understand what you've said, HainKurt, but you're basically confirming what I already suspected (but giving me the term "quirks mode"), and I'm not asking you to repeat yourself.
I'm asking for "Q2. Please explain exactly why the header <thead> line scrolls with the details <tbody> lines in the 1st example, but stay basically stationary in the 2nd example.".
When I say "exactly", the kind of answer which might help me is: HTML5 ignores the abc CSS because that's been replaced by xyz, so if you want the page to render with HTML5 as it does in quirks mode you'll have to change abc to xyz.
Meanwhile, I'll have a look at the quirksmode page you linked to, to see if I can work out anything from there, but I doubt I will because for starters, I don't even see HTML5 mentioned on that page.
I'm asking for "Q2. Please explain exactly why the header <thead> line scrolls with the details <tbody> lines in the 1st example, but stay basically stationary in the 2nd example.".
When I say "exactly", the kind of answer which might help me is: HTML5 ignores the abc CSS because that's been replaced by xyz, so if you want the page to render with HTML5 as it does in quirks mode you'll have to change abc to xyz.
Meanwhile, I'll have a look at the quirksmode page you linked to, to see if I can work out anything from there, but I doubt I will because for starters, I don't even see HTML5 mentioned on that page.
ASKER
Hi again HainKurt,
I've had another look at your last post, and I see this:
"Q2: in QUIRKS mode, it is different than HTML5, the div height is adjusted to height of window and table is short, so there are some space after table..."
Sounds promising, but not enough to show me how to fix this with my level of understanding. I've added question Q3 to my original post, in the hopes that you or someone else can answer it. Sorry for not including that originally, and thanks for your help so far.
I've had another look at your last post, and I see this:
"Q2: in QUIRKS mode, it is different than HTML5, the div height is adjusted to height of window and table is short, so there are some space after table..."
Sounds promising, but not enough to show me how to fix this with my level of understanding. I've added question Q3 to my original post, in the hopes that you or someone else can answer it. Sorry for not including that originally, and thanks for your help so far.
remove "height:100%" from css/style
every browser may render different,
and if you really want to know what it is doing,
search "quirks mode XXX" where xxx may be chrome canary firefox ie safari etc...
.tableFixHead {
overflow-y: auto;
/* height: 100%; */
}every browser may render different,
and if you really want to know what it is doing,
search "quirks mode XXX" where xxx may be chrome canary firefox ie safari etc...
Q1. I would have thought that in the 1st example the browser would know to treat it as HTML5, while in the 2nd example it would have to guess. Right?
Correct. The 2nd example (Quirks mode) means each time each/every browser releases a new version, you can potentially have new behavior.
Said differently, get this working today, likely it will fail tomorrow.
Best always use <!DOCTYPE html> to ensure your code works across browsers + browser versions.
Q2. Please explain exactly why the header <thead> line scrolls with the details <tbody> lines in the 1st example, but stay basically stationary in the 2nd example.
With Quirks mode, difficult to say + remember, even if you build some understanding today, likely this will change at some point.
Update, here's a 3rd question:
Q3. How would I need to change the 1st example so that it works as the 2nd example does (i.e. table header line stays stationary), without removing the <!DOCTYPE html> line (i.e. in HTML5)?
Both files scroll correctly (full table - head + body) for me in latest Chrome.
Likely best to attach a short video (with audio annotations) showing exactly what's occurring for you + what seems to be wrong.
Start with latest version of Chrome or Firefox.
Correct. The 2nd example (Quirks mode) means each time each/every browser releases a new version, you can potentially have new behavior.
Said differently, get this working today, likely it will fail tomorrow.
Best always use <!DOCTYPE html> to ensure your code works across browsers + browser versions.
Q2. Please explain exactly why the header <thead> line scrolls with the details <tbody> lines in the 1st example, but stay basically stationary in the 2nd example.
With Quirks mode, difficult to say + remember, even if you build some understanding today, likely this will change at some point.
Update, here's a 3rd question:
Q3. How would I need to change the 1st example so that it works as the 2nd example does (i.e. table header line stays stationary), without removing the <!DOCTYPE html> line (i.e. in HTML5)?
Both files scroll correctly (full table - head + body) for me in latest Chrome.
Likely best to attach a short video (with audio annotations) showing exactly what's occurring for you + what seems to be wrong.
Start with latest version of Chrome or Firefox.
ASKER
Thanks again for that, HainKurt.
I've taken a copy of the 1st example (standards mode), removing the "height" attribute, and here's the result:
http://filestore.c1.biz/ee/29199241/table_tbody_scroll1a.htm
It still doesn't scroll. I tried it in Firefox, Chrome, Opera, Vivaldi and Edge.
Any ideas?
Thanks very much for your answers, David.
> "Both files scroll correctly (full table - head + body) for me in latest Chrome."
Well, I'm using Chrome 86.0.4240.183 (Official Build) (64-bit) on Windows 10, and the header line doesn't scroll with the detail lines for me.
> "Likely best to attach a short video (with audio annotations) showing exactly what's occurring for you + what seems to be wrong."
Before I consider doing that, let's make sure we're on the same page, (starting with making sure we're on the same web page).
- The web page you're talking about is my 2nd example, i.e.: http://filestore.c1.biz/ee/29199241/table_tbody_scroll2.htm, right?
- Is your Chrome on a phone, a Windows 10 PC, or what?
- The lines in the <thead> are those containing "Header1 Header2 ...etc", right?
- You should be zoomed in enough to see 2 scroll bars on the right, i.e. inner (left) one for the table, and the outter (right) one for the whole page, and you should scroll down on the inner (left) scroll bar, as in this screen shot.table_tbody_scroll2.gif
Regardless of your answers to the above, can you recommend any free & easy options for producing such a video? I've seen some suggestions in the past, but haven't tried any yet and am interested to hear other recommendations.
I've taken a copy of the 1st example (standards mode), removing the "height" attribute, and here's the result:
http://filestore.c1.biz/ee/29199241/table_tbody_scroll1a.htm
It still doesn't scroll. I tried it in Firefox, Chrome, Opera, Vivaldi and Edge.
Any ideas?
Thanks very much for your answers, David.
> "Both files scroll correctly (full table - head + body) for me in latest Chrome."
Well, I'm using Chrome 86.0.4240.183 (Official Build) (64-bit) on Windows 10, and the header line doesn't scroll with the detail lines for me.
> "Likely best to attach a short video (with audio annotations) showing exactly what's occurring for you + what seems to be wrong."
Before I consider doing that, let's make sure we're on the same page, (starting with making sure we're on the same web page).
- The web page you're talking about is my 2nd example, i.e.: http://filestore.c1.biz/ee/29199241/table_tbody_scroll2.htm, right?
- Is your Chrome on a phone, a Windows 10 PC, or what?
- The lines in the <thead> are those containing "Header1 Header2 ...etc", right?
- You should be zoomed in enough to see 2 scroll bars on the right, i.e. inner (left) one for the table, and the outter (right) one for the whole page, and you should scroll down on the inner (left) scroll bar, as in this screen shot.table_tbody_scroll2.gif
Regardless of your answers to the above, can you recommend any free & easy options for producing such a video? I've seen some suggestions in the past, but haven't tried any yet and am interested to hear other recommendations.
or you can use
https://jsfiddle.net/HainKurt/c67dt1qj/
.content {
padding: 0;
overflow: scroll;
overflow-x: hidden;
height: calc(100% - 3em);
border: 1px silver dotted;
/*-webkit-overflow-scrolling: touch;*/
}https://jsfiddle.net/HainKurt/c67dt1qj/
height: calc(100% - 3em);
2.4 em makes top and bottom equal...
3 em is better to be on safe side...
height of the content is calculated dynamically, removing 3 em (3 x height of line), which is used for top/bottom text
rest is for scrollable div...
2.4 em makes top and bottom equal...
3 em is better to be on safe side...
height of the content is calculated dynamically, removing 3 em (3 x height of line), which is used for top/bottom text
rest is for scrollable div...
when zoom in/out, last example works perfect... I guess...
used 2,6 em (2.4 em created redundant scroll bar for page)
used 2,6 em (2.4 em created redundant scroll bar for page)
ASKER
Hi HainKurt,
Thanks for those demos. Looks like a significant rewrite of the CSS I had, which is not really what I was after, but anyway I've tested them in Firefox and Chrome on WIndows 10 and both have the "Header1 Header2..." line scrolling with the detail lines, which is not what I'm after. I'm wanting what I asked for in Q3. Neither of the screen shot you provided show that happening. Your 1st screen shot is scrolled down to detail line 8 and the "Header..." lines have scrolled off the page. Your 2nd screen shot is not scrolled down at all so I can't tell whether the "Header..." lines will scroll off the page.
Thanks for those demos. Looks like a significant rewrite of the CSS I had, which is not really what I was after, but anyway I've tested them in Firefox and Chrome on WIndows 10 and both have the "Header1 Header2..." line scrolling with the detail lines, which is not what I'm after. I'm wanting what I asked for in Q3. Neither of the screen shot you provided show that happening. Your 1st screen shot is scrolled down to detail line 8 and the "Header..." lines have scrolled off the page. Your 2nd screen shot is not scrolled down at all so I can't tell whether the "Header..." lines will scroll off the page.
so, you need something
100% height
headers are fixed/frozen?
100% height
headers are fixed/frozen?
maybe this...
https://jsfiddle.net/HainKurt/1yhnqjct/
I guess, you should really start looking at jQuery plugins...
https://datatables.net/examples/basic_init/scroll_y.html
https://jsfiddle.net/HainKurt/1yhnqjct/
I guess, you should really start looking at jQuery plugins...
https://datatables.net/examples/basic_init/scroll_y.html
ASKER
Hi HainKurt,
It's hard to be sure of exactly what you mean, because you're not speaking in complete sentences, but I already have "height: 100%" in both of my original examples, the 1st of which doesn't work the way I want it to as a result of the <!DOCTYPE html> line. You understand that, right?
And both your 1st 2 also have "height: 100%", and neither of them work the way I want them to either.
My 2nd example basically works the way I want it to, i.e. "Header..." line stays in fixed position while scrolling the table.
However, I've just seen your last post, with a 3rd demo, and will check it out now, so stand by...
It's hard to be sure of exactly what you mean, because you're not speaking in complete sentences, but I already have "height: 100%" in both of my original examples, the 1st of which doesn't work the way I want it to as a result of the <!DOCTYPE html> line. You understand that, right?
And both your 1st 2 also have "height: 100%", and neither of them work the way I want them to either.
My 2nd example basically works the way I want it to, i.e. "Header..." line stays in fixed position while scrolling the table.
However, I've just seen your last post, with a 3rd demo, and will check it out now, so stand by...
ASKER
Hi HainKurt,
Thanks for the effort you put into that. I've been testing your 3rd demo, and I've put it into a full script, complete with a <!DOCTYPE html> line, here:
http://filestore.c1.biz/ee/29199241/table_tbody_scroll3.htm
It seems to keep the "Heading..." line stationary, which is good.
However, what is the benefit of it, apart from giving me a (new) solution which works with a <!DOCTYPE html> line?
The point of bringing this to EE in the first place was to try to understand exactly what needs to change in my 1st example to make it work like my 2nd example, and I would have thought it wouldn't require a complete rewrite of the solution. I quite like my 2nd example for its conciseness, but it doesn't work with a <!DOCTYPE html> line.
> "I guess, you should really start looking at jQuery plugins.."
I've seen JavaScript/jQuery examples before, including datatables, but I'm intentionally trying to avoid them, in the hopes that I can have a very light-weight and simple solution. Sometimes I'm displaying a few thousand rows on a page.
Thanks for the effort you put into that. I've been testing your 3rd demo, and I've put it into a full script, complete with a <!DOCTYPE html> line, here:
http://filestore.c1.biz/ee/29199241/table_tbody_scroll3.htm
It seems to keep the "Heading..." line stationary, which is good.
However, what is the benefit of it, apart from giving me a (new) solution which works with a <!DOCTYPE html> line?
The point of bringing this to EE in the first place was to try to understand exactly what needs to change in my 1st example to make it work like my 2nd example, and I would have thought it wouldn't require a complete rewrite of the solution. I quite like my 2nd example for its conciseness, but it doesn't work with a <!DOCTYPE html> line.
> "I guess, you should really start looking at jQuery plugins.."
I've seen JavaScript/jQuery examples before, including datatables, but I'm intentionally trying to avoid them, in the hopes that I can have a very light-weight and simple solution. Sometimes I'm displaying a few thousand rows on a page.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for that Rob, and sorry for the delay in responding.
I've put your adjustment here, and it seems to work, because the headings now stay fixed:
http://filestore.c1.biz/ee/29199241/table_tbody_scroll4.htm
Are you able to explain why your change allowed me to reinstate the <!DOCTYPE html> line, please?
After some trial and error, I found that I could also get the site to give a similar result, without making your change, but by simply commenting out this line, like this:
http://filestore.c1.biz/ee/29199241/table_tbody_scroll5.htm
Any ideas why that worked, also?
Thanks.
tel2
I've put your adjustment here, and it seems to work, because the headings now stay fixed:
http://filestore.c1.biz/ee/29199241/table_tbody_scroll4.htm
Are you able to explain why your change allowed me to reinstate the <!DOCTYPE html> line, please?
After some trial and error, I found that I could also get the site to give a similar result, without making your change, but by simply commenting out this line, like this:
/* .tableFixHead { overflow-y: auto; height: 100%; } */http://filestore.c1.biz/ee/29199241/table_tbody_scroll5.htm
Any ideas why that worked, also?
Thanks.
tel2
Hi tel2,
It's all to do with standards. When you include the <!doctype html> it is directly specifying the html5 standard. Without it, the browser reverts to whatever it wants, for the most part, Quirks mode. Browsers these days are used for viewing lots of different content, not just webpages e.g. pdfs, videos, text files and so on. The doctype is like the first few bytes of a pdf file that describe when to expect in what follows.
All the browsers are expected to adhere to the standards set out by the w3 consortium. Some add features and so on but will display the page as expected when you tell it to go by the doctype you set.
https://www.w3.org/QA/Tips/Doctype
So to answer your questions above, and i can try and find it exactly, but unless a container has a fixed height, in this case the <body> tag, it cannot be scrolled.
The second example works by removing the "fixed" height from the table (in this case 100% of the parent), which allows the "sticky" postition attribute to work. I'd need to do more digging into the spec to find out exactly why but my best guess is that sticky only works when there's no fixed height.
It's all to do with standards. When you include the <!doctype html> it is directly specifying the html5 standard. Without it, the browser reverts to whatever it wants, for the most part, Quirks mode. Browsers these days are used for viewing lots of different content, not just webpages e.g. pdfs, videos, text files and so on. The doctype is like the first few bytes of a pdf file that describe when to expect in what follows.
All the browsers are expected to adhere to the standards set out by the w3 consortium. Some add features and so on but will display the page as expected when you tell it to go by the doctype you set.
https://www.w3.org/QA/Tips/Doctype
So to answer your questions above, and i can try and find it exactly, but unless a container has a fixed height, in this case the <body> tag, it cannot be scrolled.
The second example works by removing the "fixed" height from the table (in this case 100% of the parent), which allows the "sticky" postition attribute to work. I'd need to do more digging into the spec to find out exactly why but my best guess is that sticky only works when there's no fixed height.
ASKER
Thanks for that explaination, Rob.
A couple of things I forgot to mention:
1. Those 2 examples that I linked to in my last post actually give slightly different results. The 1st keeps "This is above the table" at the top of the page with the Header line as I scroll down, while the 2nd lets "This is above the table" scroll off the top as I scroll down (which I quite like). Any ideas what causes that difference?
2. When you said this:
<body style="height: 90vh;"> though it can't be %
Why can't it be %?
vh is sort-of a % measure anyway, isn't it, i.e. 90 means 90/100?
Thanks.
A couple of things I forgot to mention:
1. Those 2 examples that I linked to in my last post actually give slightly different results. The 1st keeps "This is above the table" at the top of the page with the Header line as I scroll down, while the 2nd lets "This is above the table" scroll off the top as I scroll down (which I quite like). Any ideas what causes that difference?
2. When you said this:
<body style="height: 90vh;"> though it can't be %
Why can't it be %?
vh is sort-of a % measure anyway, isn't it, i.e. 90 means 90/100?
Thanks.
1. Those 2 examples that I linked to in my last post actually give slightly different results. The 1st keeps "This is above the table" at the top of the page with the Header line as I scroll down, while the 2nd lets "This is above the table" scroll off the top as I scroll down (which I quite like). Any ideas what causes that difference?
This can explain it a lot better than me: https://uxdesign.cc/position-stuck-96c9f55d9526.. Seems you're not alone and there's confusion over the implementation of the W3 spec for overflow with sticky elements and what should happen when combining with overflow.
https://developer.mozilla.org/en-US/docs/Web/CSS/position (under "sticky")
https://www.w3.org/TR/css-position-3/#sticky-pos
2. When you said this:
<body style="height: 90vh;"> though it can't be %
Why can't it be %?
vh is sort-of a % measure anyway, isn't it, i.e. 90 means 90/100?
That's correct in part. vh is the viewport height (or viewable area) whereas the % relates to size of the parent element. If the content is larger than the viewport then you'll get different results. In this case, 90% relates to the total height of the document whereas 90vh makes the element 10% smaller than the height of what you can see. I hope that makes sense haha
This can explain it a lot better than me: https://uxdesign.cc/position-stuck-96c9f55d9526.. Seems you're not alone and there's confusion over the implementation of the W3 spec for overflow with sticky elements and what should happen when combining with overflow.
https://developer.mozilla.org/en-US/docs/Web/CSS/position (under "sticky")
https://www.w3.org/TR/css-position-3/#sticky-pos
2. When you said this:
<body style="height: 90vh;"> though it can't be %
Why can't it be %?
vh is sort-of a % measure anyway, isn't it, i.e. 90 means 90/100?
That's correct in part. vh is the viewport height (or viewable area) whereas the % relates to size of the parent element. If the content is larger than the viewport then you'll get different results. In this case, 90% relates to the total height of the document whereas 90vh makes the element 10% smaller than the height of what you can see. I hope that makes sense haha
ASKER
Well explained (and linked) thanks Rob!
1st one is HTML5
2nd one is whatever browser decides (QUIRKS mode)...
and I guess, it may be implemented differently between different browsers...
1st one will be same in all browsers, but second one will be rendered differently between chrome/ie/opera etc...