{"id":20,"date":"2005-11-08T21:22:58","date_gmt":"2005-11-08T21:22:58","guid":{"rendered":"http:\/\/west-penwith.org.uk\/blog\/archives\/20"},"modified":"2014-04-11T18:38:01","modified_gmt":"2014-04-11T17:38:01","slug":"scrolling-tables-and-css","status":"publish","type":"post","link":"https:\/\/west-penwith.org.uk\/blog\/archives\/20","title":{"rendered":"Scrolling tables and CSS"},"content":{"rendered":"<p>When asked by a colleague on the <a href=\"http:\/\/www.cornwall-opc.org\/\">Cornwall OPC Project<\/a> for a way to present tabular data so that the headers remained fixed &ldquo;like Freeze Panes in Excel&rsquo; I started to look at what was around. It is not easy, firstly because of quirks with the browsers and secondly because CSS doesn&#8217;t seem to cater for it properly. For a narrow table which just requires vertical scrolling, this seems to work ok.<\/p>\n<pre>\r\ndiv#tbl {\r\n\theight: 300px;\r\n\twidth: 60%;\r\n\tbackground: #ffc; \/* this is relevant *\/\r\n\toverflow: auto; \/* triggers the scrolling in IE *\/\r\n}\r\nhtml>body div#tbl {\r\n\toverflow: hidden; \/* don't do it this way in other browsers *\/\r\n}\r\ndiv#tbl thead th {\r\n\tposition: relative; \/* fix the top line of the scroll for IE *\/\r\n\tbackground: #ffc; \/* to hide the scrolling content *\/\r\n\ttop: -2px; \/* need to move the header up a bit to\r\n\t\t\tcomplete the illusion *\/\r\n}\r\ndiv#tbl tbody { \/* both items ignored by IE *\/\r\n\tmax-height: 270px; \/* adjust to lose bottom scroll bar *\/\r\n\toverflow: auto; \/* Triggers the scrolling *\/\r\n}\r\ndiv#tbl td:last-child {\r\n\tpadding-right: 20px; \/* prevent scrollbar from hiding\r\n\t\t\tlast cell contents *\/\r\n}\r\n<\/pre>\n<p>This is for a strict mode page with a table containing a thead with th elements and a tbody with td elements all surrounded by a div id=&#8217;tbl&#8217;.<\/p>\n<p>If the table gets wide, however, and needs sideways scrolling, there seems to be no solution which works adequately. There is a way to do it in IE using quirks mode but the location of the fixed header in Mozilla browsers makes it impossible.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When asked by a colleague on the Cornwall OPC Project for a way to present tabular data so that the headers remained fixed &ldquo;like Freeze Panes in Excel&rsquo; I started to look at what was around. It is not easy, firstly because of quirks with the browsers and secondly because CSS doesn&#8217;t seem to cater [&hellip;]<\/p>\n","protected":false},"author":239,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,5],"tags":[],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-browsers","category-technical"],"_links":{"self":[{"href":"https:\/\/west-penwith.org.uk\/blog\/wp-json\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/west-penwith.org.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/west-penwith.org.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/west-penwith.org.uk\/blog\/wp-json\/wp\/v2\/users\/239"}],"replies":[{"embeddable":true,"href":"https:\/\/west-penwith.org.uk\/blog\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":1,"href":"https:\/\/west-penwith.org.uk\/blog\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":1814,"href":"https:\/\/west-penwith.org.uk\/blog\/wp-json\/wp\/v2\/posts\/20\/revisions\/1814"}],"wp:attachment":[{"href":"https:\/\/west-penwith.org.uk\/blog\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/west-penwith.org.uk\/blog\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/west-penwith.org.uk\/blog\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}