<div dir="ltr">Hi -<div><br></div><div>Ah, I see what you mean now. It does take a lot to get that to work. The first result in a google for 'fixed table header', <a href="http://fixerheadertable.com">fixerheadertable.com</a> works for me in Chrome and Firefox and is a jQuery plugin so should be pretty standard. The possible thing to remember here is that IE remains awful at many use cases, so you may find yourself having to use exceptions to handle it. I really wouldn't waste time on trying to do it yourself though as it will take longer than it's worth.</div>
<div><br></div><div>s/</div></div><div class="gmail_extra"><br><br><div class="gmail_quote">On 23 January 2014 14:54, Gary Stainburn <span dir="ltr"><<a href="mailto:gary.stainburn@ringways.co.uk" target="_blank">gary.stainburn@ringways.co.uk</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Simon,<br>
<br>
The problem with having everything as a single table is that I have not<br>
managed to get a workable solution where the header row stays visible when<br>
the datat is scrolled - spreadsheet style.<br>
<br>
The live tables are 25+ columns by hundreds of rows.<br>
<br>
I have tried various publically available methods. The best I found was the<br>
jquery library handsontable, but that randomly failed in IE and was overkill<br>
for what I wanted<br>
<br>
If anyone can suggest other tools for me to try instead of re-inventing the<br>
wheel I'm happy to have a go<br>
<span class="HOEnZb"><font color="#888888"><br>
Gary<br>
</font></span><div class="HOEnZb"><div class="h5"><br>
On Thursday 23 January 2014 14:41:10 Simon Greenwood wrote:<br>
> Hi -<br>
><br>
> In HTML a table is a single object and has a body and an optional header so<br>
> making it a single table will reduce the inaccuracy. Once you've done that,<br>
> you probably want to set a width either as a fixed figure or a percentage<br>
> as otherwise the first row in the table effectively defines the overall<br>
> width. If you have an idea of what data is going in it, it's useful to set<br>
> the definitions in the header row. You can also set them in the first data<br>
> row but the header will take precedence.<br>
><br>
> s/<br>
><br>
> On 23 January 2014 14:06, Gary Stainburn<br>
<<a href="mailto:gary.stainburn@ringways.co.uk">gary.stainburn@ringways.co.uk</a>>wrote:<br>
> > My premis is that I have used identical text to define both tables so<br>
> > surely<br>
> > both should be identical when rendered.<br>
> ><br>
> > In both cases the table is larger than the DIV that contains it, but with<br>
> > overflow allowed on both I would have thought that this was not the<br>
> > problem.<br>
> ><br>
> > I cannot see why on the header table the TD is 'X' number of px wider<br>
> > than in<br>
> > the data table, where 'X' seems to be a constant<br>
> ><br>
> > On Thursday 23 January 2014 13:58:25 Simon Greenwood wrote:<br>
> > > Hi -<br>
> > ><br>
> > > The table header and the table data have to be within the same table or<br>
> > > they don't know about each other. You can use divs inside the table to<br>
> > > define styles. IE is probably more fast and loose with this that<br>
> > > Firefox and Chrome are. If they don't match up after that then you may<br>
> > > have to fiddle with padding and colspans.<br>
> > ><br>
> > > s/<br>
> > ><br>
> > > On 23 January 2014 13:43, Gary Stainburn<br>
> ><br>
> > <<a href="mailto:gary.stainburn@ringways.co.uk">gary.stainburn@ringways.co.uk</a>>wrote:<br>
> > > > Hi folks.<br>
> > > ><br>
> > > > I'm having a go at a home grown solution for having a scollable table<br>
> > > > with locked column headers.  I've stripped the problem back to it's<br>
> > > > simplest.<br>
> > > ><br>
> > > > I have two DIV's, one containing a table with the column headers in,<br>
> ><br>
> > one<br>
> ><br>
> > > > with<br>
> > > > a table containing the data.<br>
> > > ><br>
> > > > Despite both being defined the same, the TD widths on the two tables<br>
> > > > differ,<br>
> > > > which means that the headers don't line up.<br>
> > > ><br>
> > > > Can anyone tell me why please?<br>
> > > ><br>
> > > > BTW, it works in IE8 but  not in Firefox.  I'm guessing I need to set<br>
> > > > something in CSS but as both div's and tables are set up the same I<br>
> ><br>
> > don't<br>
> ><br>
> > > > know what.<br>
> > > ><br>
> > > > The last TD is 20px wider in the header, as is the table, to make<br>
> > > > room for the<br>
> > > > scroll bar in the table.  However, I have removed this difference and<br>
> ><br>
> > it<br>
> ><br>
> > > > didn't affect the problem.<br>
> > > ><br>
> > > > <a href="http://www1.ringways.co.uk/test_table.html" target="_blank">http://www1.ringways.co.uk/test_table.html</a><br>
> > > ><br>
> > > > Gary<br>
> > > ><br>
> > > > --<br>
> > > > Gary Stainburn<br>
> > > > Group I.T. Manager<br>
> > > > Ringways Garages<br>
> > > > <a href="http://www.ringways.co.uk" target="_blank">http://www.ringways.co.uk</a><br>
> > > ><br>
> > > > _______________________________________________<br>
> > > > Wylug-help mailing list<br>
> > > > <a href="mailto:Wylug-help@wylug.org.uk">Wylug-help@wylug.org.uk</a><br>
> > > > <a href="https://mailman.lug.org.uk/mailman/listinfo/wylug-help" target="_blank">https://mailman.lug.org.uk/mailman/listinfo/wylug-help</a><br>
> ><br>
> > --<br>
> > Gary Stainburn<br>
> > Group I.T. Manager<br>
> > Ringways Garages<br>
> > <a href="http://www.ringways.co.uk" target="_blank">http://www.ringways.co.uk</a><br>
> ><br>
> > _______________________________________________<br>
> > Wylug-help mailing list<br>
> > <a href="mailto:Wylug-help@wylug.org.uk">Wylug-help@wylug.org.uk</a><br>
> > <a href="https://mailman.lug.org.uk/mailman/listinfo/wylug-help" target="_blank">https://mailman.lug.org.uk/mailman/listinfo/wylug-help</a><br>
<br>
<br>
<br>
--<br>
Gary Stainburn<br>
Group I.T. Manager<br>
Ringways Garages<br>
<a href="http://www.ringways.co.uk" target="_blank">http://www.ringways.co.uk</a><br>
<br>
_______________________________________________<br>
Wylug-help mailing list<br>
<a href="mailto:Wylug-help@wylug.org.uk">Wylug-help@wylug.org.uk</a><br>
<a href="https://mailman.lug.org.uk/mailman/listinfo/wylug-help" target="_blank">https://mailman.lug.org.uk/mailman/listinfo/wylug-help</a><br>
</div></div></blockquote></div><br><br clear="all"><div><br></div>-- <br>Twitter: @sfgreenwood<div>"TBA are particularly glib"<br></div>
</div>