[html5] table with fixed headers

Brian Tremblay webmaster at tsmchughs.com
Thu Jul 3 13:25:03 PDT 2014

On 7/3/14, 7:34 AM, Larry Martell wrote:
> On Wed, Jul 2, 2014 at 5:54 PM, Brian Tremblay 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:

>> [snip html table]

>>>>> 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/
>> 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.

You also said the columns weren't lining up with the data:

On 7/1/14, 9:19 AM, Larry Martell wrote:
> Thanks very much for the reply Martin. But this doesn't seem to fix
> my problem - i.e. the column headers are not aligned with the data

So I was trying to answer that part of your question.

>> BTW, your html has more than 30 errors, including this one:
>> "Warning: 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.
> I posted a small example showing the problem. The 'errors' have
> nothing to do with the issue.

First: I'm not sure why you put quote marks around "errors". It's almost
as though you think they're imaginary. They're not. You misspelled
"align" as "aligh" 15 times. That's not the only error.

Second: how do you know that removing the errors won't fix the problem?

>> And please correct the other errors while you're at it, so that
>> debugging is easier and we can provide better help.

That's the key. When I post your code in my editor, I first have to
correct all your errors before I can start troubleshooting. If you did
that, perhaps the data would line up, and we could focus on the problem
of getting fixed headers and footers on your table.

> But I have found out that by setting display:block on the tbody, I
> essentially remove the “tableness”. So I am SOL.

I'd think some combination of css positioning would do the job. But I'm 
not going to spend time on the css if the underlying html is broken. Too 
many blind alleys.

Brian Tremblay

More information about the Help mailing list