Tables: Fixing the column widths absolutely ?

A

Alan Searle

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

<td align="RIGHT" width="77">

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

Bergamot

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

Sounds like a design flaw. Post a URL.
 
N

Neredbojias

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

<td align="RIGHT" width="77">

... 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.
Click to expand...

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;
 
A

Alan Searle

Bergamot said:
Sounds like a design flaw. Post a URL.
Click to expand...

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

<html>
<head>
</head>
<body>
<table width="198">
<tr bgcolor="#dddddd" VALIGN="TOP">
<td align="LEFT" width="66">Col01</td>
<td align="LEFT" width="66">Col02</td>
<td align="LEFT" width="66">Col03</td>
</tr>
<tr>
<td align="LEFT" width="66">aaa</td>
<td align="LEFT" width="66">the_rain_in_spain_stays_mainly</td>
<td align="LEFT" width="66">ccc</td>
</tr>
</table>
</html>
</body>
 
B

Bergamot

Alan said:
I've reduced my HTML right down to the bare bones to illustrate my
problem.
Click to expand...

[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.
 
A

Alan Searle

Bergamot said:
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.
Click to expand...

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.
Click to expand...

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

rf

Alan Searle said:
Bergamot wrote:
Click to expand...
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.
Click to expand...

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 <thead> (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.
 
D

dorayme

Alan Searle said:
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.


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.
Click to expand...

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


<table>
<tr>
<th>Col01</th>
<th>Col02</th>
<th>Col03</th>
</tr>
<tr>
<td>aaa</td>
<td>the_rain_in_spain_stays_mainly</td>
<td>ccc</td>
</tr>
</table>

because the unbreakable content of the second cell on the second
row is too big for the width of the column you would like and
would look bad wrapped even if it could wrap. Would you be happy
if *all* the cells were as wide as your widest cell? That would
not be hard to arrange.
 
B

Ben C

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.
Click to expand...

I think that does work in some browsers but not in others. And I'm not
sure about it.

The spec (CSS 2.1 17.5.2.2) says:

Calculate the minimum content width (MCW) of each cell: the
formatted content may span any number of lines but may not overflow
the cell box. If the specified 'width' (W) of the cell is greater
than MCW, W is the minimum cell width ...

So what does "may not overflow the cell box" mean?

If overflow is set to hidden, in the technical CSS sense, the box still
overflows. The overflow property just says what to do about, not that it
hasn't happened.

But if the overflowing bit has been clipped, because overflow was set to
hidden, then you might say in ordinary language that the box no longer
overflows.

On the former interpretation, which I favour, the value of the overflow
property should make absolutely no difference to minimum content width.
So it shouldn't stop table-cells growing past their set widths to fit
long unbreakable sequences.

The same thing applied to shrink-to-fit calculations for floats was
behind the anomaly observed by dorayme on htmldog.com recently. Firefox
allowed a big <pre> element to be shorter than its minimum content width
because it had overflow: scroll.

[...]
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.
Click to expand...

Yes, it sounds like the best thing would be one big table. That will
make sure the headings line up with the columns properly.
 
B

Bergamot

Alan said:
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
Click to expand...

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
Click to expand...

No doubt by coincidence, or luck.
 
A

Alan Searle

Bergamot said:
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.
Click to expand...

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
 
A

Alan Searle

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
 
J

Jonathan N. Little

Alan said:
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.
Click to expand...

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

Alan Searle

You've triggered quirks mode, all bets are off!
Click to expand...

'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.
Click to expand...

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

dorayme

Alan Searle said:
'quirks mode'? What does this mean? Are you saying that it simply
won't work under IE ?
Click to expand...

Look at

<http://en.wikipedia.org/wiki/Quirks_mode>

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):

<http://www.imaputz.com/cssStuff/bigFourVersion.html>

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

dorayme

dorayme said:
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):

<http://www.imaputz.com/cssStuff/bigFourVersion.html>

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.
Click to expand...

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

Jonathan N. Little

Alan said:
'quirks mode'? What does this mean? Are you saying that it simply
won't work under IE ?
Click to expand...

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
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.
Click to expand...

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Fixed Header</title>

<style type="text/css">

table, td, th { table-layout: fixed; }
th { text-align: left; }
table.freeze { width: 25em; }
/* make containing DIV a bit larger for scrollbar */
div.scroll { width: 26.5em; height: 10em; overflow: auto; }
div.scroll table { width: 25em; }
</style>

</head>
<body>

<table class="freeze">
<colgroup><col width="15%"><col><col width="15%"></colgroup>
<tr><th>Col01</th><th>Col02</th><th>Col03</th></tr>
</table>
<div class="scroll">
<table>
<colgroup><col width="15%"><col><col width="15%"></colgroup>
<tr><td>aaa</td><td>the_rain_in_spain_stays_mainly</td><td>ccc</td></tr>
<tr><td>aaa</td><td>the_rain_in_spain_stays_mainly</td><td>ccc</td></tr>
<tr><td>aaa</td><td>the_rain_in_spain_stays_mainly</td><td>ccc</td></tr>

....
more rows
....

</table>
</div>

</body>
</html>
 
B

Bergamot

Jonathan said:
One way requires 2 tables, a containing div and tweaking but works in
old IE...
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I need help fixing my website 2
Need help fixing code 1
Fixing Column Widths Permanently 1
Design Questions (Widths, Rowspan) 1
How can I set column widths in a JTable 7
SendGrid email issue in responsive Gmail 1
picture width decides table column width 3
JTable column sizing 1

Members online

Total: 39 (members: 3, guests: 36)
Robots: 203

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,044
Latest member
RonaldNen

Latest Threads

Top