Fixed top row in a table
in [CSS]
|
Prev: Float elements break block elemens - why?
Next: paypal wholesale all brand(UGGBOOTS,SHOES,CLOTHES,HANDBAG,WATCH,JEANS,JERSEY,T-SHIRT,SHIRTS,HOODY,EYEGLASS,CAP,SHAWL,WALLT) and so on
From: Jonathan N. Little on 4 Mar 2010 00:16 Thomas 'PointedEars' Lahn wrote: > Jonathan N. Little wrote: > It is not supposed to be Gecko-only, though, as it is perfectly Valid CSS > (CSS3's overflow-x/y is optional). > True, but the reality is only Gecko currently supports it. >> <html> > > Missing DOCTYPE declaration, triggering all kinds of Quirks/Compatibility > Mode incompatibilities. That's a Really Bad Idea[tm]. > Just missed when it did the cut and paste, <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> anyone who frequents this NG is aware of how thorough my examples typically are. >> <head> >> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> >> <meta http-equiv="content-language" content="en-us"> > > "content-language" is not specified. Use the `lang' attribute of the HTML > element instead. > >> <title>template</title> > > That element should come directly after Content-Type (if present) so that > it is parsed early by robots. Actually Content-Type is not needed at all because it is sent in the headers by the server, but since my example was indented for a local filesystem... > >> <style type="text/css"> >> table.static { border: solid black 3px; } >> table.static td, table.static th { border: solid black 1px; padding: 0 >> 1em; } > > The borders are optional, and 1em padding left and right wastes a lot of > space. 0.5em should suffice. It was just an example, OP can style whatever way he wishes. Note that you cannot use border-collapse: collapse; else the cell borders will not scroll with cells, bug in Gecko. > >> table.static thead { background: #000; color: #fff; } >> table.static tbody { height: 10em; overflow-y: scroll; overflow-x: >> hidden;}</style> > > 10em is probably hard to scroll; I ended up with 23em. Depends on the > font-size and paddings, of course. `overflow-y: auto' suffices; no > scrollbars necessary where there is not enough content. And don't forget > > table.static>tbody td:last-child { > padding-right: 20px; > } > overflow-x: hidden; is required else a horizontal scrollbar will be present and the table body can shift with respect to header row. 10em is just an arbitrary value to show the scroll effect on this *limited* example. Did not want to post a table with 100 rows. -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
From: Jonathan N. Little on 4 Mar 2010 00:24 Thomas 'PointedEars' Lahn wrote: > Thomas 'PointedEars' Lahn wrote: > >> The following tweak is recommended: >> >> <!--[if IE 7]> >> <style type="text/css"> >> /* IE 7: Support for scrollable tbody is buggy */ >> >> table>tbody.static { > > table.static>tbody { > > in this example. I have it differently in the ES Matrix because I want the > user to be able to toggle scrollability if sufficient script support is > present, and I mostly keep the style for the THEAD. > IMO the proprietary conditional comments is a bad idea. Defeats the purpose of separating markup from stylesheets and JavaScript with external files. Change you style and you now editing /n/ pages instead of *one* stylesheet. MS takes another stab at making a 2.1 compliant browser and ditto to updating those /n/ pages with a new fork in the comments. No thanks. Play the graceful degrade for *inferior* browsers... -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
From: Thomas 'PointedEars' Lahn on 4 Mar 2010 07:38 Jonathan N. Little wrote: > Thomas 'PointedEars' Lahn wrote: >> Thomas 'PointedEars' Lahn wrote: >>> The following tweak is recommended: >>> >>> <!--[if IE 7]> >>> <style type="text/css"> >>> /* IE 7: Support for scrollable tbody is buggy */ >>> >>> table>tbody.static { >> >> table.static>tbody { >> >> in this example. I have it differently in the ES Matrix because I want >> the user to be able to toggle scrollability if sufficient script support >> is present, and I mostly keep the style for the THEAD. > > IMO the proprietary conditional comments is a bad idea. Defeats the > purpose of separating markup from stylesheets and JavaScript with > external files. Change you style and you now editing /n/ pages instead > of *one* stylesheet. MS takes another stab at making a 2.1 compliant > browser and ditto to updating those /n/ pages with a new fork in the > comments. No thanks. Play the graceful degrade for *inferior* browsers... What are you babbling about? The Conditional Comments are the only means to handle *this* quirk of *this* MSHTML version reliably. PointedEars
From: Thomas 'PointedEars' Lahn on 4 Mar 2010 07:54 Jonathan N. Little wrote: > Thomas 'PointedEars' Lahn wrote: >> Jonathan N. Little wrote: >> It is not supposed to be Gecko-only, though, as it is perfectly Valid >> CSS (CSS3's overflow-x/y is optional). > > True, but the reality is only Gecko currently supports it. You miss the point. >>> <html> >> >> Missing DOCTYPE declaration, triggering all kinds of >> Quirks/Compatibility Mode incompatibilities. That's a Really Bad >> Idea[tm]. > > Just missed when it did the cut and paste, Yeah, sure. > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" > "http://www.w3.org/TR/html4/strict.dtd"> > <html> > > anyone who frequents this NG is aware of how thorough my examples > typically are. Interesting claim, given that of the 33 postings from you here in the last 2 1/2 months this has been the only such example. >>> <title>template</title> >> >> That element should come directly after Content-Type (if present) so >> that it is parsed early by robots. > > Actually Content-Type is not needed at all because it is sent in the > headers by the server, but since my example was indented for a local > filesystem... I know. Learn to read. >>> <style type="text/css"> >>> table.static { border: solid black 3px; } >>> table.static td, table.static th { border: solid black 1px; padding: 0 >>> 1em; } >> >> The borders are optional, and 1em padding left and right wastes a lot of >> space. 0.5em should suffice. > > It was just an example, OP can style whatever way he wishes. Note that > you cannot use border-collapse: collapse; else the cell borders will not > scroll with cells, bug in Gecko. Yes, that is why I did not use them. Confirmed again for Gecko 1.9.1.8. >>> table.static thead { background: #000; color: #fff; } >>> table.static tbody { height: 10em; overflow-y: scroll; overflow-x: >>> hidden;}</style> >> >> 10em is probably hard to scroll; I ended up with 23em. Depends on the >> font-size and paddings, of course. `overflow-y: auto' suffices; no >> scrollbars necessary where there is not enough content. And don't >> forget >> >> table.static>tbody td:last-child { >> padding-right: 20px; >> } > > overflow-x: hidden; is required else a horizontal scrollbar will be > present and the table body can shift with respect to header row. Depends. However, I was aiming at your suggesting `overflow-y: scroll'. > 10em is just an arbitrary value to show the scroll effect on this > *limited* example. Did not want to post a table with 100 rows. My 23em high scrollable table body displays 15 rows at maximum. PointedEars
From: Jonathan N. Little on 4 Mar 2010 09:05
Thomas 'PointedEars' Lahn wrote: > Jonathan N. Little wrote: > >> Thomas 'PointedEars' Lahn wrote: >>> Thomas 'PointedEars' Lahn wrote: >>>> The following tweak is recommended: >>>> >>>> <!--[if IE 7]> >>>> <style type="text/css"> >>>> /* IE 7: Support for scrollable tbody is buggy */ >>>> >>>> table>tbody.static { >>> >>> table.static>tbody { >>> >>> in this example. I have it differently in the ES Matrix because I want >>> the user to be able to toggle scrollability if sufficient script support >>> is present, and I mostly keep the style for the THEAD. >> >> IMO the proprietary conditional comments is a bad idea. Defeats the >> purpose of separating markup from stylesheets and JavaScript with >> external files. Change you style and you now editing /n/ pages instead >> of *one* stylesheet. MS takes another stab at making a 2.1 compliant >> browser and ditto to updating those /n/ pages with a new fork in the >> comments. No thanks. Play the graceful degrade for *inferior* browsers... > > What are you babbling about? The Conditional Comments are the only > means to handle *this* quirk of *this* MSHTML version reliably. > Okay let's try it again. If you have a website with 50 pages. On those 50 pages you have a link to an external stylesheet. And if you have done you markup with foresight and efficiency then to change the styling of all 50 pages of the site would require a change to only *one* document--the stylesheet. Also, the stylesheet is *optional* and your site should be still accessible if a bit less "pretty" without. If a browser does not support a CSS property it should degrade "gracefully". Now, add the MS's Conditional Comments to "fix" your pages. Conditional Comments are added to the HTML document and not the stylesheet, so style changes could result in 50 page edits. Yes, you could use the comments to load a "fix_lousy_ie.css" stylesheet to help mitigate the problem. However IE slow and painful progress towards supporting CSS v2.1 has not always been linear. I found one IE7 specific peekaboo bug not present in versions before or after. And although the W3 is as slow as MS, version 2.1 is not the endpoint. CSS will continue to evolve so with MS's propensity to progress like a tired two-year-old being dragged through the grocery store, how many forks would be needed to your Conditional Comments? Again resulting in 50 page edits! So in *my option* because of complexity Conditional Comments can add to the maintenance of a website, my conclusion is that Conditional Comments is a bad idea. -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com |