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: S.T. on 3 Mar 2010 21:01 I have a table with a substantial number of rows and need to keep the top row fixed/static (so that row is always visible when scrolling). Googling gives some answers but they *all* seem rather complicated -- most utilizing javascript -- apparently to make the technique work in IE. In this case I don't care whether it works on IE or not -- is there a simpler CSS/HTML method that will work for the latest version of Firefox, and if so any hints on what to look for like some -moz-whatever: rule I'm not aware of? Thanks
From: Jonathan N. Little on 3 Mar 2010 21:33 S.T. wrote: > I have a table with a substantial number of rows and need to keep the > top row fixed/static (so that row is always visible when scrolling). > Googling gives some answers but they *all* seem rather complicated -- > most utilizing javascript -- apparently to make the technique work in IE. > > In this case I don't care whether it works on IE or not -- is there a > simpler CSS/HTML method that will work for the latest version of > Firefox, and if so any hints on what to look for like some > -moz-whatever: rule I'm not aware of? > Well a simple Gecko only css solution is to set a fixed height and overflow properties on the TBODY element. <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="content-language" content="en-us"> <title>template</title> <style type="text/css"> table.static { border: solid black 3px; } table.static td, table.static th { border: solid black 1px; padding: 0 1em; } table.static thead { background: #000; color: #fff; } table.static tbody { height: 10em; overflow-y: scroll; overflow-x: hidden;} </style> </head> <body> <table class="static"> <thead><tr><th>Static</th><th>Header</th><th>Row</th></tr></thead> <tbody> <tr><td>Some</td><td>Data</td><td> 0</td></tr> <tr><td>Some</td><td>Data</td><td> 1</td></tr> <tr><td>Some</td><td>Data</td><td> 2</td></tr> <tr><td>Some</td><td>Data</td><td> 3</td></tr> <tr><td>Some</td><td>Data</td><td> 4</td></tr> <tr><td>Some</td><td>Data</td><td> 5</td></tr> <tr><td>Some</td><td>Data</td><td> 6</td></tr> <tr><td>Some</td><td>Data</td><td> 7</td></tr> <tr><td>Some</td><td>Data</td><td> 8</td></tr> <tr><td>Some</td><td>Data</td><td> 9</td></tr> <tr><td>Some</td><td>Data</td><td> 10</td></tr> <tr><td>Some</td><td>Data</td><td> 11</td></tr> <tr><td>Some</td><td>Data</td><td> 12</td></tr> <tr><td>Some</td><td>Data</td><td> 13</td></tr> <tr><td>Some</td><td>Data</td><td> 14</td></tr> <tr><td>Some</td><td>Data</td><td> 15</td></tr> <tr><td>Some</td><td>Data</td><td> 16</td></tr> <tr><td>Some</td><td>Data</td><td> 17</td></tr> <tr><td>Some</td><td>Data</td><td> 18</td></tr> <tr><td>Some</td><td>Data</td><td> 19</td></tr> <tr><td>Some</td><td>Data</td><td> 20</td></tr> <tr><td>Some</td><td>Data</td><td> 21</td></tr> <tr><td>Some</td><td>Data</td><td> 22</td></tr> <tr><td>Some</td><td>Data</td><td> 23</td></tr> <tr><td>Some</td><td>Data</td><td> 24</td></tr> <tr><td>Some</td><td>Data</td><td> 25</td></tr> <tr><td>Some</td><td>Data</td><td> 26</td></tr> <tr><td>Some</td><td>Data</td><td> 27</td></tr> <tr><td>Some</td><td>Data</td><td> 28</td></tr> <tr><td>Some</td><td>Data</td><td> 29</td></tr> </tbody> </table> </body> </html> -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
From: dorayme on 3 Mar 2010 21:53 In article <4b8f138a$0$22130$742ec2ed(a)news.sonic.net>, "S.T." <anon(a)anon.com> wrote: > I have a table with a substantial number of rows and need to keep the > top row fixed/static (so that row is always visible when scrolling). > Googling gives some answers but they *all* seem rather complicated -- > most utilizing javascript -- apparently to make the technique work in IE. > > In this case I don't care whether it works on IE or not -- is there a > simpler CSS/HTML method that will work for the latest version of > Firefox, and if so any hints on what to look for like some > -moz-whatever: rule I'm not aware of? > > Thanks You could look at something like: <http://www.imaputz.com/cssStuff/bigFourVersion.html> Works in a variety of Mac browsers. Not sure about Windows. -- dorayme
From: Thomas 'PointedEars' Lahn on 3 Mar 2010 22:56 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. PointedEars
From: Thomas 'PointedEars' Lahn on 3 Mar 2010 22:52
Jonathan N. Little wrote: > S.T. wrote: >> I have a table with a substantial number of rows and need to keep the >> top row fixed/static (so that row is always visible when scrolling). >> Googling gives some answers but they *all* seem rather complicated -- >> most utilizing javascript -- apparently to make the technique work in >> IE. >> >> In this case I don't care whether it works on IE or not -- is there a >> simpler CSS/HTML method that will work for the latest version of >> Firefox, and if so any hints on what to look for like some >> -moz-whatever: rule I'm not aware of? > > Well a simple Gecko only css solution is to set a fixed height and > overflow properties on the TBODY element. It is not supposed to be Gecko-only, though, as it is perfectly Valid CSS (CSS3's overflow-x/y is optional). > <html> Missing DOCTYPE declaration, triggering all kinds of Quirks/Compatibility Mode incompatibilities. That's a Really Bad Idea[tm]. > <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. > <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. > 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; } otherwise the content would flow under the vertical scrollbar. (Unfortunately, I could not come up with a hack against a vertical scrollbar of variable width yet. Any ideas?) The following tweak is recommended: <!--[if IE 7]> <style type="text/css"> /* IE 7: Support for scrollable tbody is buggy */ table>tbody.static { height: auto; overflow: visible; border-top: 1px; border-left-color: black; } </style> <![endif]--> IIRC, the borders are optional. See the ECMAScript Support Matrix at <http://PointedEars.de/es-matrix> for details and a real-world example. PointedEars |