Re: [css-d] Table with fixed headers
On Sun, Jul 6, 2014 at 10:52 AM, Larry Martell larry.mart...@gmail.com wrote: On Sat, Jul 5, 2014 at 3:14 PM, Karl DeSaulniers k...@designdrumm.com wrote: On Jul 4, 2014, at 1:18 PM, Larry Martell larry.mart...@gmail.com wrote: On Thu, Jul 3, 2014 at 10:49 PM, Karl DeSaulniers k...@designdrumm.com wrote: Hi Larry, See my code pen. I think this is what your wanting and it's table less. :) http://codepen.io/designdrumm/pen/FLAkc Haven't tested on IE, I'm on a mac. But safari, firefox and opera seemed to work and display the same. HTH, Karl, thanks very much for taking the time to put this up. But it still has the same issue - if a cell of data is long, then it runs into the adjoining cell, e.g.: http://codepen.io/anon/pen/IGcmt Also I need it to be table since we use a table sorting package. I've found a javascript solution that appears to work: http://nevcal.com/eclectic/UltimateScrollingTable.html The only issue I am having is that I've lost the on click handler for the table headers that invoke the sorting. I think I know how to fix it, but I haven't had a chance to implement it yet. I would much prefer a pure CSS solution, but I don't think that's possible while keeping all the features the table provides. Hi Larry, Give this one a try. I made this one with a table. HTH, http://codepen.io/designdrumm/pen/dreBL Hi Karl, Thanks very much for taking the time to put this up. The issue I see with this, is you set the column width to 33% (100/number of columns). In my tables I have 10-15 columns and I do not want them to be the same size - I need them to auto size based on the data. I played around with your code and when I added more columns, some with very short data (e.g. 4 characters), the headers and data got misaligned. I have 10 tables and they are all different and I don't want to have to have a style for each of my 125 cells. I'd like it to work as it does now (where I don't set any widths) and the table just works as I want. Thanks again. Just to close out this thread, I ended up using http://nevcal.com/eclectic/UltimateScrollingTable.html __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
On Sat, Jul 5, 2014 at 3:14 PM, Karl DeSaulniers k...@designdrumm.com wrote: On Jul 4, 2014, at 1:18 PM, Larry Martell larry.mart...@gmail.com wrote: On Thu, Jul 3, 2014 at 10:49 PM, Karl DeSaulniers k...@designdrumm.com wrote: Hi Larry, See my code pen. I think this is what your wanting and it's table less. :) http://codepen.io/designdrumm/pen/FLAkc Haven't tested on IE, I'm on a mac. But safari, firefox and opera seemed to work and display the same. HTH, Karl, thanks very much for taking the time to put this up. But it still has the same issue - if a cell of data is long, then it runs into the adjoining cell, e.g.: http://codepen.io/anon/pen/IGcmt Also I need it to be table since we use a table sorting package. I've found a javascript solution that appears to work: http://nevcal.com/eclectic/UltimateScrollingTable.html The only issue I am having is that I've lost the on click handler for the table headers that invoke the sorting. I think I know how to fix it, but I haven't had a chance to implement it yet. I would much prefer a pure CSS solution, but I don't think that's possible while keeping all the features the table provides. Hi Larry, Give this one a try. I made this one with a table. HTH, http://codepen.io/designdrumm/pen/dreBL Hi Karl, Thanks very much for taking the time to put this up. The issue I see with this, is you set the column width to 33% (100/number of columns). In my tables I have 10-15 columns and I do not want them to be the same size - I need them to auto size based on the data. I played around with your code and when I added more columns, some with very short data (e.g. 4 characters), the headers and data got misaligned. I have 10 tables and they are all different and I don't want to have to have a style for each of my 125 cells. I'd like it to work as it does now (where I don't set any widths) and the table just works as I want. Thanks again. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
On Jul 4, 2014, at 1:18 PM, Larry Martell larry.mart...@gmail.com wrote: On Thu, Jul 3, 2014 at 10:49 PM, Karl DeSaulniers k...@designdrumm.com wrote: Hi Larry, See my code pen. I think this is what your wanting and it's table less. :) http://codepen.io/designdrumm/pen/FLAkc Haven't tested on IE, I'm on a mac. But safari, firefox and opera seemed to work and display the same. HTH, Karl, thanks very much for taking the time to put this up. But it still has the same issue - if a cell of data is long, then it runs into the adjoining cell, e.g.: http://codepen.io/anon/pen/IGcmt Also I need it to be table since we use a table sorting package. I've found a javascript solution that appears to work: http://nevcal.com/eclectic/UltimateScrollingTable.html The only issue I am having is that I've lost the on click handler for the table headers that invoke the sorting. I think I know how to fix it, but I haven't had a chance to implement it yet. I would much prefer a pure CSS solution, but I don't think that's possible while keeping all the features the table provides. Hi Larry, Give this one a try. I made this one with a table. HTH, http://codepen.io/designdrumm/pen/dreBL Best, Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
On Thu, Jul 3, 2014 at 10:49 PM, Karl DeSaulniers k...@designdrumm.com wrote: On Jul 2, 2014, at 7:36 AM, Larry Martell larry.mart...@gmail.com wrote: On Tue, Jul 1, 2014 at 9:25 PM, Tom Livingston tom...@gmail.com wrote: Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? Depending on your content this may be (or outright is) semantically horrifying, but you could achieve the *visual look* you want by using CSS display:table, et al and/or dl,dt,dd and css and have better luck with the fixed header. Some googling resulted in nothing other than solutions similar to yours. That's a good one. I look forward to someone smarter than me figuring it out... Thanks for the suggestion Tom, and also thanks for the validation that what I'm trying to do is hard ;-) Hi Larry, See my code pen. I think this is what your wanting and it's table less. :) http://codepen.io/designdrumm/pen/FLAkc Haven't tested on IE, I'm on a mac. But safari, firefox and opera seemed to work and display the same. HTH, Karl, thanks very much for taking the time to put this up. But it still has the same issue - if a cell of data is long, then it runs into the adjoining cell, e.g.: http://codepen.io/anon/pen/IGcmt Also I need it to be table since we use a table sorting package. I've found a javascript solution that appears to work: http://nevcal.com/eclectic/UltimateScrollingTable.html The only issue I am having is that I've lost the on click handler for the table headers that invoke the sorting. I think I know how to fix it, but I haven't had a chance to implement it yet. I would much prefer a pure CSS solution, but I don't think that's possible while keeping all the features the table provides. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
On Fri, Jul 4, 2014 at 2:18 PM, Larry Martell larry.mart...@gmail.com wrote: On Thu, Jul 3, 2014 at 10:49 PM, Karl DeSaulniers k...@designdrumm.com wrote: On Jul 2, 2014, at 7:36 AM, Larry Martell larry.mart...@gmail.com wrote: On Tue, Jul 1, 2014 at 9:25 PM, Tom Livingston tom...@gmail.com wrote: Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? Depending on your content this may be (or outright is) semantically horrifying, but you could achieve the *visual look* you want by using CSS display:table, et al and/or dl,dt,dd and css and have better luck with the fixed header. Some googling resulted in nothing other than solutions similar to yours. That's a good one. I look forward to someone smarter than me figuring it out... Thanks for the suggestion Tom, and also thanks for the validation that what I'm trying to do is hard ;-) Hi Larry, See my code pen. I think this is what your wanting and it's table less. :) http://codepen.io/designdrumm/pen/FLAkc Haven't tested on IE, I'm on a mac. But safari, firefox and opera seemed to work and display the same. HTH, Karl, thanks very much for taking the time to put this up. But it still has the same issue - if a cell of data is long, then it runs into the adjoining cell, e.g.: http://codepen.io/anon/pen/IGcmt Also I need it to be table since we use a table sorting package. I've found a javascript solution that appears to work: http://nevcal.com/eclectic/UltimateScrollingTable.html The only issue I am having is that I've lost the on click handler for the table headers that invoke the sorting. I think I know how to fix it, but I haven't had a chance to implement it yet. I would much prefer a pure CSS solution, but I don't think that's possible while keeping all the features the table provides. I had only tested on FF and I just tried it on IE and it's not working there. So bummed. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
On Jul 4, 2014, at 1:18 PM, Larry Martell larry.mart...@gmail.com wrote: On Thu, Jul 3, 2014 at 10:49 PM, Karl DeSaulniers k...@designdrumm.com wrote: On Jul 2, 2014, at 7:36 AM, Larry Martell larry.mart...@gmail.com wrote: On Tue, Jul 1, 2014 at 9:25 PM, Tom Livingston tom...@gmail.com wrote: Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? Depending on your content this may be (or outright is) semantically horrifying, but you could achieve the *visual look* you want by using CSS display:table, et al and/or dl,dt,dd and css and have better luck with the fixed header. Some googling resulted in nothing other than solutions similar to yours. That's a good one. I look forward to someone smarter than me figuring it out... Thanks for the suggestion Tom, and also thanks for the validation that what I'm trying to do is hard ;-) Hi Larry, See my code pen. I think this is what your wanting and it's table less. :) http://codepen.io/designdrumm/pen/FLAkc Haven't tested on IE, I'm on a mac. But safari, firefox and opera seemed to work and display the same. HTH, Karl, thanks very much for taking the time to put this up. But it still has the same issue - if a cell of data is long, then it runs into the adjoining cell, e.g.: http://codepen.io/anon/pen/IGcmt Also I need it to be table since we use a table sorting package. I've found a javascript solution that appears to work: http://nevcal.com/eclectic/UltimateScrollingTable.html The only issue I am having is that I've lost the on click handler for the table headers that invoke the sorting. I think I know how to fix it, but I haven't had a chance to implement it yet. I would much prefer a pure CSS solution, but I don't think that's possible while keeping all the features the table provides. Ah, I see. Well my solution to the squeezing columns would be to use some @media to change them from inline to block at the size they overlap. But if you need a table for sorting, you could always shove it inside the li#cols and it could possibly work still. But good luck! Post back if you get a table to do what you're wanting. I'd be interested to see it done. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
Le 2 juil. 2014 à 04:19, Larry Martell larry.mart...@gmail.com a écrit : But I want the table to be scrollable with a fixed header, so I do this: http://jsfiddle.net/mrLVG/ From testing I found that I have to have display: block; on both tbody.scrollContent and thead.fixedHeader tr or I do not get the scrollbars and fixed headers. But it is also the display: block that seems to be causing the misalignment. Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? By setting display:block on the tbody, you essentially remove the “tableness”. As a result the browsers actually recreate a table inside your tbody, wrapping around all your tr/td [*]. Same applies to your thead tr. Messy situation… You might fix it partly by locking the width on each th/td - which is no very attractive (cough… understatement). Have you seen this stack overflow? http://stackoverflow.com/questions/21003235/creating-a-sticky-header-on-a-thead No clean solutions, though. In the future, creating such a table-with-fixed-header will be much easier thanks to position: sticky http://dev.w3.org/csswg/css-position-3/#sticky-positioning That is already implemented in Safari 6.1/7, is coming to Firefox 32, and is implemented behind a flag in Bink based browsers (Opera, Chrome) – ask $search_engine for the details about that flag. Unfortunately sticky positioning on a table-header is not yet implemented; it works in Webkit nightly builds but not in release builds, yet. Firefox has an open bug for it. Quick Example™: http://dev.l-c-n.com/_temp/scrollable-table.html The ‘some fixed heading’ is already sticky in Safari 7, the table works in WebKit nightly builds and maybe Opera/chrome with the aforementioned flag turned on. [*] see the CSS 2.1 spec for the reasons: http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
On Thu, Jul 3, 2014 at 6:27 AM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 2 juil. 2014 à 04:19, Larry Martell larry.mart...@gmail.com a écrit : But I want the table to be scrollable with a fixed header, so I do this: http://jsfiddle.net/mrLVG/ From testing I found that I have to have display: block; on both tbody.scrollContent and thead.fixedHeader tr or I do not get the scrollbars and fixed headers. But it is also the display: block that seems to be causing the misalignment. Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? By setting display:block on the tbody, you essentially remove the “tableness”. As a result the browsers actually recreate a table inside your tbody, wrapping around all your tr/td [*]. Same applies to your thead tr. Messy situation… You might fix it partly by locking the width on each th/td - which is no very attractive (cough… understatement). Have you seen this stack overflow? http://stackoverflow.com/questions/21003235/creating-a-sticky-header-on-a-thead No clean solutions, though. In the future, creating such a table-with-fixed-header will be much easier thanks to position: sticky http://dev.w3.org/csswg/css-position-3/#sticky-positioning That is already implemented in Safari 6.1/7, is coming to Firefox 32, and is implemented behind a flag in Bink based browsers (Opera, Chrome) – ask $search_engine for the details about that flag. Unfortunately sticky positioning on a table-header is not yet implemented; it works in Webkit nightly builds but not in release builds, yet. Firefox has an open bug for it. Quick Example™: http://dev.l-c-n.com/_temp/scrollable-table.html The ‘some fixed heading’ is already sticky in Safari 7, the table works in WebKit nightly builds and maybe Opera/chrome with the aforementioned flag turned on. [*] see the CSS 2.1 spec for the reasons: http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes Thanks for the detailed reply. I had seen a lot of SO posts about this, but not the one you gave. I'll check it out. The problem with specifying an explicit width for each column is that I have 10 tables, each with 30-40 columns, and I don't always know the width of the data. Also, we sort a table sorting package and that puts an up/down arrow in the header when you click on it, and that changes the width of the column. All this new stuff sounds promising, but the client doesn't use Chrome, and only allows FF version 12 and IE version 9. Hard to believe, but true. They were running PHP version 5.1 and it took me 3 months to get them to upgrade to 5.4. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
On Jul 2, 2014, at 7:36 AM, Larry Martell larry.mart...@gmail.com wrote: On Tue, Jul 1, 2014 at 9:25 PM, Tom Livingston tom...@gmail.com wrote: Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? Depending on your content this may be (or outright is) semantically horrifying, but you could achieve the *visual look* you want by using CSS display:table, et al and/or dl,dt,dd and css and have better luck with the fixed header. Some googling resulted in nothing other than solutions similar to yours. That's a good one. I look forward to someone smarter than me figuring it out... Thanks for the suggestion Tom, and also thanks for the validation that what I'm trying to do is hard ;-) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Hi Larry, See my code pen. I think this is what your wanting and it's table less. :) http://codepen.io/designdrumm/pen/FLAkc Haven't tested on IE, I'm on a mac. But safari, firefox and opera seemed to work and display the same. HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
That is well done, and best of all, without a table. On 2014-07-03, at 8:49 PM, Karl DeSaulniers wrote: On Jul 2, 2014, at 7:36 AM, Larry Martell larry.mart...@gmail.com wrote: On Tue, Jul 1, 2014 at 9:25 PM, Tom Livingston tom...@gmail.com wrote: Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? Depending on your content this may be (or outright is) semantically horrifying, but you could achieve the *visual look* you want by using CSS display:table, et al and/or dl,dt,dd and css and have better luck with the fixed header. Some googling resulted in nothing other than solutions similar to yours. That's a good one. I look forward to someone smarter than me figuring it out... Thanks for the suggestion Tom, and also thanks for the validation that what I'm trying to do is hard ;-) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Hi Larry, See my code pen. I think this is what your wanting and it's table less. :) http://codepen.io/designdrumm/pen/FLAkc Haven't tested on IE, I'm on a mac. But safari, firefox and opera seemed to work and display the same. HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
On Tue, Jul 1, 2014 at 9:25 PM, Tom Livingston tom...@gmail.com wrote: Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? Depending on your content this may be (or outright is) semantically horrifying, but you could achieve the *visual look* you want by using CSS display:table, et al and/or dl,dt,dd and css and have better luck with the fixed header. Some googling resulted in nothing other than solutions similar to yours. That's a good one. I look forward to someone smarter than me figuring it out... Thanks for the suggestion Tom, and also thanks for the validation that what I'm trying to do is hard ;-) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
Maybe if I ask this question a different way, I can figure out an answer. Normally when I create a table I apply no CSS to it and it just does the right thing, e.g.: http://jsfiddle.net/u6ULk/ But I want the table to be scrollable with a fixed header, so I do this: http://jsfiddle.net/mrLVG/ From testing I found that I have to have display: block; on both tbody.scrollContent and thead.fixedHeader tr or I do not get the scrollbars and fixed headers. But it is also the display: block that seems to be causing the misalignment. Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? On Mon, Jun 30, 2014 at 4:33 PM, Larry Martell larry.mart...@gmail.com wrote: I am trying to implement a table with fixed headers using the concepts from this page: http://www.imaputz.com/cssStuff/bigFourVersion.html# Problem is, in my implementation, my table columns are not aligned with the table headers. Please see this fiddle: http://jsfiddle.net/softvar/yL84C/ If I remove all the css the table is properly aligned. I'm sure it's something simple, but I cannot figure out what it is. Thanks! __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
Is it possible to have a scrolling table with fixed headers without explicitly specifying the table cell sizes? Depending on your content this may be (or outright is) semantically horrifying, but you could achieve the *visual look* you want by using CSS display:table, et al and/or dl,dt,dd and css and have better luck with the fixed header. Some googling resulted in nothing other than solutions similar to yours. That's a good one. I look forward to someone smarter than me figuring it out... -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Table with fixed headers
I am trying to implement a table with fixed headers using the concepts from this page: http://www.imaputz.com/cssStuff/bigFourVersion.html# Problem is, in my implementation, my table columns are not aligned with the table headers. Please see this fiddle: http://jsfiddle.net/softvar/yL84C/ If I remove all the css the table is properly aligned. I'm sure it's something simple, but I cannot figure out what it is. Thanks! __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
That example explicitly sets the width of each th and each td. The last th and td (the td, really) accounts for what the author thinks will be the width of the scroll bar. I forked your fiddle and added the top 3 declarations: http://jsfiddle.net/cFr38/ Hope it helps. Chris Rockwell On Mon, Jun 30, 2014 at 4:33 PM, Larry Martell larry.mart...@gmail.com wrote: I am trying to implement a table with fixed headers using the concepts from this page: http://www.imaputz.com/cssStuff/bigFourVersion.html# Problem is, in my implementation, my table columns are not aligned with the table headers. Please see this fiddle: http://jsfiddle.net/softvar/yL84C/ If I remove all the css the table is properly aligned. I'm sure it's something simple, but I cannot figure out what it is. Thanks! __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Table with fixed headers
On Mon, Jun 30, 2014 at 3:10 PM, Chris Rockwell ch...@chrisrockwell.com wrote: That example explicitly sets the width of each th and each td. The last th and td (the td, really) accounts for what the author thinks will be the width of the scroll bar. I forked your fiddle and added the top 3 declarations: http://jsfiddle.net/cFr38/ Hope it helps. Thanks - this helps a lot but is there a way to get the cells automagically sized based on the data (which is what my table does now without the new CSS)? On Mon, Jun 30, 2014 at 4:33 PM, Larry Martell larry.mart...@gmail.com wrote: I am trying to implement a table with fixed headers using the concepts from this page: http://www.imaputz.com/cssStuff/bigFourVersion.html# Problem is, in my implementation, my table columns are not aligned with the table headers. Please see this fiddle: http://jsfiddle.net/softvar/yL84C/ If I remove all the css the table is properly aligned. I'm sure it's something simple, but I cannot figure out what it is. Thanks! __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
