Tables: Fixing the column widths absolutely ?

Hi everyone,

I have a table which, in order to line up with other information, needs
to have very exact column widths.

So far I have implemented the following with normal HTML tables ...



.... which works OK most of the time.

However, sometimes the data contained in the table overshoots the column
width and the table starts to 'distort' which completely messes up my
presentation.

Maybe someone has a suggestion for setting the column widths exactly?
Here I am wondering if there is a relationship with the declared table
width? Or whether there is a setting that can be switched on or off to
force exact width?

Many thanks for any tips you can give me.

Regards,
Alan Searle

Re: Tables: Fixing the column widths absolutely ?

Alan Searle wrote:
>
> I have a table which, in order to line up with other information, needs
> to have very exact column widths.

Sounds like a design flaw. Post a URL.

--
Berg

Re: Tables: Fixing the column widths absolutely ?

Well bust mah britches and call me cheeky, on Wed, 17 Oct 2007 12:47:41 GMT
Alan Searle scribed:

> Hi everyone,
>
> I have a table which, in order to line up with other information, needs
> to have very exact column widths.
>
> So far I have implemented the following with normal HTML tables ...
>
>
>
> ... which works OK most of the time.
>
> However, sometimes the data contained in the table overshoots the column
> width and the table starts to 'distort' which completely messes up my
> presentation.
>
> Maybe someone has a suggestion for setting the column widths exactly?
> Here I am wondering if there is a relationship with the declared table
> width? Or whether there is a setting that can be switched on or off to
> force exact width?
>
> Many thanks for any tips you can give me.

From my experience, table cells will always expand to content - at least in
some browsers - no matter if the css attribute table-layout:fixed; is set
or not.

One thing you can try is a div (inside the cell) set to the appropriate
width and overflow:hidden;

--
Neredbojias
Half lies are worth twice as much as whole lies.

Re: Tables: Fixing the column widths absolutely ?

Bergamot wrote:
> Alan Searle wrote:
>> I have a table which, in order to line up with other information, needs
>> to have very exact column widths.
>
> Sounds like a design flaw. Post a URL.

I've reduced my HTML right down to the bare bones to illustrate my
problem. What tends to happen is that, if there are spaces, then the
cell retains its correct size but as soon as longer text appears, the
column-sizing goes haywire.

I've posted a simple example below where I would like column 02 to keep
the declared width of 66.

Any ideas here?

I'll try experimenting with Neredbojias suggestions (next posting) and
will report back.

Regards and thanks,
Alan Searle

Re: Tables: Fixing the column widths absolutely ?

Alan Searle wrote:
> Bergamot wrote:
>> Alan Searle wrote:
>>> I have a table which, in order to line up with other information, needs
>>> to have very exact column widths.
>>
>> Sounds like a design flaw. Post a URL.
>
> I've reduced my HTML right down to the bare bones to illustrate my
> problem.

[snip code]

Post a URL. If you won't make the effort to make a publicly accessible
web page, why should we make any effort to help you? There are lots of
free places to post test pages so there is no excuse for not having one.

And put the problem in context, not some bogus Lorem ipsum stuff. If we
see the whole picture, we may offer different ways to acheive your goal
that you might not have considered. IOW, you may be trying to fix the
wrong problem by deciding on a solution (exact column widths) before
fully understanding the issues.

--
Berg

Re: Tables: Fixing the column widths absolutely ?

Alan Searle wrote:
> Bergamot wrote:
>> Alan Searle wrote:
>>> I have a table which, in order to line up with other information,
>>> needs to have very exact column widths.
>>
>> Sounds like a design flaw. Post a URL.
>
> I've reduced my HTML right down to the bare bones to illustrate my
> problem. What tends to happen is that, if there are spaces, then the



http://www.google.com/search?hl=en&q=what+is+a+URL%3F&btnG=G oogle+Search
what is a URL? - Google Search

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: Tables: Fixing the column widths absolutely ?

Bergamot wrote:
> Post a URL. If you won't make the effort to make a publicly accessible
> web page, why should we make any effort to help you? There are lots of
> free places to post test pages so there is no excuse for not having one.

Yes, you're right: It is easy to get free web space. And here is my
example table ...

http://alse.load4.net/tabletest/table_test02.html

I have set the table width to 300 and each column to 100 but, as you
will see, because the text in Col02 is too long, it fails to wrap and
the column is much wider than I want. If I break up the text, then the
column behaves correctly.

> And put the problem in context, not some bogus Lorem ipsum stuff. If we
> see the whole picture, we may offer different ways to acheive your goal
> that you might not have considered. IOW, you may be trying to fix the
> wrong problem by deciding on a solution (exact column widths) before
> fully understanding the issues.

Ah, yes, let me expand: I am presenting some big tables of data and so,
in the header I present the titles followed by a division break and then
the table below becomes scrollable (with the header/titles always
displayed). This is great but of course you have to make sure that the
column widths of the table are exactly the same width as the titles that
you have declared in the header. Otherwise you have skewed columns
under the headers which makes it difficult to read.

On most of the reports this works great but, wherever there is a long
item of text in a particular column, then the whole thing gets distorted.

Any tips would be most welcome.

Regards and thanks,
Alan Searle.

Re: Tables: Fixing the column widths absolutely ?

"Alan Searle" wrote in message
news:ff9opc$9nf$1@newsreader2.netcologne.de...
> Bergamot wrote:

> Ah, yes, let me expand: I am presenting some big tables of data and so,
> in the header I present the titles followed by a division break and then
> the table below becomes scrollable (with the header/titles always
> displayed). This is great but of course you have to make sure that the
> column widths of the table are exactly the same width as the titles that
> you have declared in the header. Otherwise you have skewed columns under
> the headers which makes it difficult to read.
>
> On most of the reports this works great but, wherever there is a long item
> of text in a particular column, then the whole thing gets distorted.
>
> Any tips would be most welcome.

This has been asked many, many times before (at least once a month). The
answer is "this is how tables work".

Google for further information but consider overflow: hidden; which will
work but will also hide your content.

Trying to simulate a fixed (which *is* defined in the specs but is
unsupported) with a seperate table is doomed to failure. This also has been
discussed many times before.

As Bergamot hinted, you are trying to fix the wrong problem. The *real*
problem is that your designer is insisting on that fixed header.

By the way, you did *not* provide an example of what your page will
eventually look like. Your example page has only one table, not the
"division break" you hint at above. So, it is actually still a little
unclear what you exactly want.

--
Richard.

Re: Tables: Fixing the column widths absolutely ?

In article ,
Alan Searle wrote:

> Bergamot wrote:
> > Post a URL. If you won't make the effort to make a publicly accessible
> > web page, why should we make any effort to help you? There are lots of
> > free places to post test pages so there is no excuse for not having one.
>
> Yes, you're right: It is easy to get free web space. And here is my
> example table ...
>
> http://alse.load4.net/tabletest/table_test02.html
>
> I have set the table width to 300 and each column to 100 but, as you
> will see, because the text in Col02 is too long, it fails to wrap and
> the column is much wider than I want. If I break up the text, then the
> column behaves correctly.
>
> > And put the problem in context, not some bogus Lorem ipsum stuff. If we
> > see the whole picture, we may offer different ways to acheive your goal
> > that you might not have considered. IOW, you may be trying to fix the
> > wrong problem by deciding on a solution (exact column widths) before
> > fully understanding the issues.
>
> Ah, yes, let me expand: I am presenting some big tables of data and so,
> in the header I present the titles followed by a division break and then
> the table below becomes scrollable (with the header/titles always
> displayed). This is great but of course you have to make sure that the
> column widths of the table are exactly the same width as the titles that
> you have declared in the header. Otherwise you have skewed columns
> under the headers which makes it difficult to read.
>
> On most of the reports this works great but, wherever there is a long
> item of text in a particular column, then the whole thing gets distorted.
>
> Any tips would be most welcome.
>
> Regards and thanks,
> Alan Searle.

Your url is not exactly showing the context but never mind, it is
impossible to ask a question. It has never been done correctly
yet on earth.

So you don't like:

css:

td {border 1px solid #000;} /* to show more clearly */

Re: Tables: Fixing the column widths absolutely ?

Alan Searle wrote:
>
> I am presenting some big tables of data and so,
> in the header I present the titles followed by a division break and then
> the table below becomes scrollable

You are trying to fix the wrong problem after all. Separating the table
headers from the table data is illogical and semantically incorrect.
There are better ways to get a scrolling tbody. If you search for "fixed
table headers" or "scrolling tbody" you'll probably find one, maybe several.

> On most of the reports this works great

No doubt by coincidence, or luck.

--
Berg

Bingo: scrolling tbody is the answer!

Bergamot wrote:

> There are better ways to get a scrolling tbody. If you search for "fixed
> table headers" or "scrolling tbody" you'll probably find one, maybe several.

Bingo! Yes, many thanks: This is exactly what I need.

But during my googling I did find a number of sites which use the
technique that I had been using. I find this strange and I find it
strange that when I did my initial development the 'div' method was
suggested. Anyway, the 'tbdody' method seems infinitely easy and more
stable.

Many thanks for your patience and your replies to my questions and I'll
report back to you guys to tell you how I get on implementing this.

Regards,
Alan Searle

tbody frustration ...

Arrgghh ...

I implemented the scrolling tbody solution and, yippee, it worked
perfectly ... under Firefox. Here is the URL ...

http://alse.load4.net/tabletest/table_test03.html

But under IE (6.0 SP1), it all goes haywire.

This is very frustrating because, yes, as you guys have recognised, my
battle with the column-widths is completely futile. Here, the scrolling
tbody syntax is exactly what I need. But it needs to work under IE
(unfortunately).

Does anyone have a tweak or a syntax recommendation for getting it to
work under IE? Or will it maybe work under later versions of IE?

Any tips would be a great help.

Regards and thanks,
Alan Searle

Re: tbody frustration ...

Alan Searle wrote:
> Arrgghh ...
>
> I implemented the scrolling tbody solution and, yippee, it worked
> perfectly ... under Firefox. Here is the URL ...
>
> http://alse.load4.net/tabletest/table_test03.html
>
> But under IE (6.0 SP1), it all goes haywire.

You've triggered quirks mode, all bets are off! What are you really
trying to do here. Put up a page with some content that relates to what
you are trying to accomplish, there might be a different approach that
we better suit.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: tbody frustration ...

Jonathan N. Little wrote:
> Alan Searle wrote:
>> I implemented the scrolling tbody solution and, yippee, it worked
>> perfectly ... under Firefox. Here is the URL ...
>>
>> http://alse.load4.net/tabletest/table_test03.html
>>
>> But under IE (6.0 SP1), it all goes haywire.

> You've triggered quirks mode, all bets are off!

'quirks mode'? What does this mean? Are you saying that it simply
won't work under IE ?

> What are you really
> trying to do here. Put up a page with some content that relates to what
> you are trying to accomplish, there might be a different approach that
> we better suit.

My aim is very simple: I have reporting data that is in a simple table
format but is so long that I really need to have static headers so that
the reader continues to see the column titles as he/she scrolls down.
There is no fancy presentation. It is as simple as that. I am working
with client data so I can't post the original content and, anyway, I
don't think that would help much because this is a fundamental question
about whether a scrollable table is possible under IE?

My first attempt was to divide up the page (with div tags) and make one
half scrollable. That worked OK but in some cases (where long text was
involved) the column widths distorted and dropped out of sync with the
headers.

Then I was told about the tbody syntax which seemed to be exactly what I
need. But now this seems to be problematic with IE.

This can probably be done with a script language (javascript) or with
plug-ins but this would complicate it and what I really need is simple
HTML (or CSS) synatax that will give me a scrollable table with a fixed
header.

I really hope that someone can help me with this?

Regards and many thanks,
Alan Searle.

Re: tbody frustration ...

In article ,
Alan Searle wrote:

> Arrgghh ...
>
> I implemented the scrolling tbody solution and, yippee, it worked
> perfectly ... under Firefox. Here is the URL ...
>
> http://alse.load4.net/tabletest/table_test03.html
>
> But under IE (6.0 SP1), it all goes haywire.

I was thinking, "I wonder if Alan will come back and tell us how
he went cross browser"...

--
dorayme

Re: tbody frustration ...

In article ,
Alan Searle wrote:

> Jonathan N. Little wrote:
> > Alan Searle wrote:
> >> I implemented the scrolling tbody solution and, yippee, it worked
> >> perfectly ... under Firefox. Here is the URL ...
> >>
> >> http://alse.load4.net/tabletest/table_test03.html
> >>
> >> But under IE (6.0 SP1), it all goes haywire.
>
> > You've triggered quirks mode, all bets are off!
>
> 'quirks mode'? What does this mean? Are you saying that it simply
> won't work under IE ?
>

Look at



Even given a proper 4.01 doctype, it does not work in Mac Safari,
iCab, nor in my Opera 9.2.

Plus in FF totally unnecessary horizontal scroll bars appear.
Even unnecessary vertical bars at times. Better to remove your:

tbody {
height:10em;
overflow:auto;
}
#tblbody{height:35em; overflow:scroll;}

and at most replace with:

tbody {overflow:auto;}

This at least gets it working in FF and does not make for
excessive appearing scrollbars...

Getting all this to work and degrade right in non complying
browsers does require quite some skill and/or research.

There are alternatives but you are likely wanting to focus on
getting this to work.

Why not take a look at something that at least does seem to work
on FF and Safari and Camino (I am too frightened to look at
MacIE, does not work on iCab):



I would be very surprised if it did not work on WinIE considering
the tremendous efforts the author has gone to to ensure it does.

--
dorayme

Re: tbody frustration ...

In article
,
dorayme wrote:

> Why not take a look at something that at least does seem to work
> on FF and Safari and Camino (I am too frightened to look at
> MacIE, does not work on iCab):
>
>
>
> I would be very surprised if it did not work on WinIE considering
> the tremendous efforts the author has gone to to ensure it does.

Curiosity got the better of me. The author is in fact wrong about
the table not appearing at all (see lower in his page) in Mac IE.
It appears, it is just not ideally scrollable...

--
dorayme

Re: tbody frustration ...

Alan Searle wrote:
> Jonathan N. Little wrote:
>> Alan Searle wrote:
>>> I implemented the scrolling tbody solution and, yippee, it worked
>>> perfectly ... under Firefox. Here is the URL ...
>>>
>>> http://alse.load4.net/tabletest/table_test03.html
>>>
>>> But under IE (6.0 SP1), it all goes haywire.
>
>> You've triggered quirks mode, all bets are off!
>
> 'quirks mode'? What does this mean? Are you saying that it simply
> won't work under IE ?

http://www.quirksmode.org/css/quirksmode.html
CSS - Quirks mode and strict mode

http://en.wikipedia.org/wiki/Quirks_mode
Quirks mode - Wikipedia, the free encyclopedia

>
>> What are you really trying to do here. Put up a page with some content
>> that relates to what you are trying to accomplish, there might be a
>> different approach that we better suit.
>
> My aim is very simple: I have reporting data that is in a simple table
> format but is so long that I really need to have static headers so that
> the reader continues to see the column titles as he/she scrolls down.
> There is no fancy presentation. It is as simple as that. I am working
> with client data so I can't post the original content and, anyway, I
> don't think that would help much because this is a fundamental question
> about whether a scrollable table is possible under IE?
>
> My first attempt was to divide up the page (with div tags) and make one
> half scrollable. That worked OK but in some cases (where long text was
> involved) the column widths distorted and dropped out of sync with the
> headers.
>
> Then I was told about the tbody syntax which seemed to be exactly what I
> need. But now this seems to be problematic with IE.
>
> This can probably be done with a script language (javascript) or with
> plug-ins but this would complicate it and what I really need is simple
> HTML (or CSS) synatax that will give me a scrollable table with a fixed
> header.

One way requires 2 tables, a containing div and tweaking but works in
old IE... Note the doctype and all to make page strict and not trigger
quirks mode.

"http://www.w3.org/TR/html4/strict.dtd">

Re: tbody frustration ...

Jonathan N. Little wrote:
> Alan Searle wrote:
>>>> I implemented the scrolling tbody solution and, yippee, it worked
>>>> perfectly ... under Firefox.
>>>> But under IE (6.0 SP1), it all goes haywire.
>
> One way requires 2 tables, a containing div and tweaking but works in
> old IE...

If you look back farther in the thread, you'll see that's how he was
doing it before. Separating the table headers from the data is
semantically incorrect and prone to layout problems, which is exactly
what the OP was trying to correct.

--
Berg

Re: tbody frustration ...

Alan Searle wrote:
>
> I implemented the scrolling tbody solution and, yippee, it worked
> perfectly ... under Firefox. Here is the URL ...
>
> http://alse.load4.net/tabletest/table_test03.html
>
> But under IE (6.0 SP1), it all goes haywire.

But of course. ;) Most of those tutorials that recommended just using
overflow:scroll state that it doesn't work in IE6.

Have you seen:
http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table- header.html

It's one of the original samples for scrolling tables, and still works
cross-browser AFAIK.

And do start using a proper DOCTYPE if you expect any consistency across
browsers. Stick with HTML 4.01 Strict.

--
Berg

Re: tbody frustration ...

Bergamot wrote:
> Jonathan N. Little wrote:
>> Alan Searle wrote:
>>>>> I implemented the scrolling tbody solution and, yippee, it worked
>>>>> perfectly ... under Firefox.
>>>>> But under IE (6.0 SP1), it all goes haywire.
>> One way requires 2 tables, a containing div and tweaking but works in
>> old IE...
>
> If you look back farther in the thread, you'll see that's how he was
> doing it before. Separating the table headers from the data is
> semantically incorrect and prone to layout problems, which is exactly
> what the OP was trying to correct.
>

If the "scrolling" table is his wish, and your want IE on board I don't
think he has any choice.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: tbody frustration ...

Jonathan N. Little wrote:

> If the "scrolling" table is his wish, and your want IE on board I don't

and *you* want IE on board

Man, I have a hyperactive r-finger!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com