[html5] table with fixed headers

[Larry Martell]

On Fri, Jul 4, 2014 at 1:58 PM, Larry Martell <larry.martell at gmail.com> wrote:
> On Thu, Jul 3, 2014 at 11:38 AM, Ian Bentley <ian.bentley at gmail.com> wrote:
>> Larry, I have seen several people attempt to achieve what you are trying to
>> do, but I've never seen a solution that didn't involve fixed column widths.
>>
>> Not to say it's impossible.
>
> 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 use a table sort package and 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 had only tested on FF and I just tried it on IE and it's not working
there. So bummed.

>
>>
>>
>> On 3 July 2014 11:15, Larry Martell <larry.martell at gmail.com> wrote:
>>>
>>> On Thu, Jul 3, 2014 at 10:58 AM, Emerson Veenstra
>>> <emerson at emersonveenstra.net> wrote:
>>> > On Thu, Jul 3, 2014 at 10:56 AM, Larry Martell <larry.martell at gmail.com>
>>> > wrote:
>>> >>
>>> >> On Thu, Jul 3, 2014 at 10:52 AM, Emerson Veenstra
>>> >> <emerson at emersonveenstra.net> wrote:
>>> >> > Sorry, wrong link. http://jsfiddle.net/34Fd5/24/ is the correct one
>>> >>
>>> >> That doesn't scroll.
>>> >
>>> >
>>> > Then take off the overflow: hidden that's causing it not to scroll?
>>> > http://jsfiddle.net/34Fd5/26/ no widths on that one.
>>>
>>> The header is not fixed. That is what I've been trying to achieve.
>>>
>>>
>>> >> > On Thu, Jul 3, 2014 at 10:50 AM, Emerson Veenstra
>>> >> > <emerson at emersonveenstra.net> wrote:
>>> >> >>
>>> >> >> On Thu, Jul 3, 2014 at 10:34 AM, Larry Martell
>>> >> >> <larry.martell at gmail.com>
>>> >> >> wrote:
>>> >> >>>
>>> >> >>> On Wed, Jul 2, 2014 at 5:54 PM, Brian Tremblay
>>> >> >>> <webmaster at tsmchughs.com>
>>> >> >>> wrote:
>>> >> >>> > On 7/1/14, 9:43 AM, Larry Martell wrote:
>>> >> >>> >>
>>> >> >>> >> On Tue, Jul 1, 2014 at 12:29 PM, Brian Tremblay wrote:
>>> >> >>> >>>
>>> >> >>> >>> On 7/1/14, 9:19 AM, Larry Martell wrote:
>>> >> >>> >>>>
>>> >> >>> >>>>
>>> >> >>> >>>> On Tue, Jul 1, 2014 at 9:27 AM, Martin Gainty wrote:
>>> >> >>> >>>>>
>>> >> >>> >>>>>
>>> >> >>> > [snip html table]
>>> >> >>> >>>>>>
>>> >> >>> >>>>>> Is there any way to get fixed headers without explicitly
>>> >> >>> >>>>>> setting the width of the table cells?
>>> >> >>> >>>>
>>> >> >>> >>>>
>>> >> >>> >>>> the column headers are not aligned with the data:
>>> >> >>> >>>
>>> >> >>> >>>
>>> >> >>> >>> I don't know what you mean. I pasted your page into my browser,
>>> >> >>> >>> and there are 2 rows with 3 columns each, lined up as I'd
>>> >> >>> >>> expect.
>>> >> >>> >>> What do you expect to happen that doesn't?
>>> >> >>> >>
>>> >> >>> >>
>>> >> >>> >> Please look at this fiddle:
>>> >> >>> >>
>>> >> >>> >> http://jsfiddle.net/34Fd5/
>>> >> >>> >
>>> >> >>> >
>>> >> >>> > That tells me nothing. You need to explain what you think should
>>> >> >>> > happen
>>> >> >>> > that doesn't.
>>> >> >>>
>>> >> >>> I have said what I want to happen: I want a table with fixed
>>> >> >>> headers
>>> >> >>> (i.e. headers that do not scroll off the screen when the table is
>>> >> >>> scrolled) and I want the table cells to auto size as a table will
>>> >> >>> normally do.
>>> >> >>>
>>> >> >>> > BTW, your html has more than 30 errors, including this one:
>>> >> >>> >
>>> >> >>> > "Warning Line 32, Column 17: A table row was 3 columns wide,
>>> >> >>> > which
>>> >> >>> > is
>>> >> >>> > less than the column count established by the first row (4)."
>>> >> >>> >
>>> >> >>> > Correct that, and the columns may line up the way you'd expect.
>>> >> >>> > And
>>> >> >>> > please correct the other errors while you're at it, so that
>>> >> >>> > debugging
>>> >> >>> > is
>>> >> >>> > easier and we can provide better help.
>>> >> >>>
>>> >> >>> I posted a small example showing the problem. The 'errors' have
>>> >> >>> nothing to do with the issue. But I have found out that by setting
>>> >> >>> display:block on the tbody, I essentially remove the “tableness”.
>>> >> >>> So I
>>> >> >>> am SOL.
>>> >> >>
>>> >> >>
>>> >> >>
>>> >> >>
>>> >> >>
>>> >> >> http://validator.w3.org/check?uri=http%3A%2F%2Fjsfiddle.net%2F34Fd5%2Fshow%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
>>> >> >>
>>> >> >> If you're asking for help, you could at least double check your work
>>> >> >> to
>>> >> >> make sure there aren't easily fixable errors like writing 'aligh'
>>> >> >> instead of
>>> >> >> 'align' and not closing the div.
>>> >> >>
>>> >> >> http://jsfiddle.net/34Fd5/23/ is this what you want?
>>> >> >>
>>> >> >
>>> >
>>> >
>>> _______________________________________________
>>> Help mailing list
>>> Help at lists.whatwg.org
>>> http://lists.whatwg.org/listinfo.cgi/help-whatwg.org
>>
>>
>>
>>
>> --
>> Ian Bentley