[html5] table with fixed headers

Tue Jul 1 09:43:09 PDT 2014

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/