[html5] table with fixed headers

Larry Martell larry.martell at gmail.com
Tue Jul 1 12:19:20 PDT 2014 

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 Tue, Jul 1, 2014 at 12:43 PM, Larry Martell <larry.martell at gmail.com> wrote:
> On Tue, Jul 1, 2014 at 12:29 PM, Brian Tremblay <webmaster at tsmchughs.com> wrote:
>> On 7/1/14, 9:19 AM, Larry Martell wrote:
>>>
>>>
>>> On Tue, Jul 1, 2014 at 9:27 AM, Martin Gainty <mgainty at hotmail.com> wrote:
>>>>
>>>>
>>>>> <html>
>>>>> <head>
>>>>> <title>this song has no title</title>
>>>>> </head>
>>>>> <style>
>>>>> td:nth-child(1)  { white-space: nowrap }
>>>>> td:nth-child(2) { white-space: nowrap }
>>>>> td:nth-child(3) { white-space: nowrap }
>>>>> </style>
>>>>> <body>
>>>>> <table id="table" border cellspacing=0 style="width: 100%">
>>>>> <tr>
>>>>> <td style="">NAME</td>
>>>>> <td style="">This is a short message</td>
>>>>> <td>TIME</td>
>>>>> </tr>
>>>>> <tr>
>>>>> <td>NAME OTHER</td>
>>>>> <td>This is a
>>>>>
>>>>> llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllloooooooooooooooonnnnnnnnnnnnnngggggggggggggggggggg
>>>>> message</td>
>>>>> <td>TIME_VERY_LONG_FORMAT</td>
>>>>> </tr>
>>>>> </table>
>>>>> </body>
>>>>> </html>
>>>>>
>>>>> Is there any way to get fixed headers without explicitly setting
>>>>> the width of the table cells?
>>
>>>>
>>>> white-space: nowrap
>>
>>>
>>> this doesn't seem to fix my
>>> problem - i.e. 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/

More information about the Help mailing list