469,271 Members | 1,484 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

How to ensure equal width columns on a dynamically generated table

Hi all,

I tried searching for this before posting but it's not exactly something that is easy to search for and I'm not sure if this falls more under the ASP.NET forum or here.

I'm using ASP.NET to get database values and forming them into a single table row. The context is that I have a list of "attributes" that I need to generate headings for and this table row sits above a long list of other things.

The problem is, sometimes I might have 4 columns, sometimes I might have 5, sometimes 6, sometimes 7. I always have the same 433 pixel-wide table though. If I don't set the width property on the TDs, I end up with arbitrarily-sized columns when I actually want equal width.

Is there any easy way to create table columns that are always equal width when you only definitely know the full table width without knowing how many columns there will be?
Sep 25 '07 #1
26 24524
drhowarddrfine
7,435 Expert 4TB
Without knowing the number of columns, and if the content is unequal, then it's not possible.
Sep 25 '07 #2
Much thanks. I guess I will have to do something with C# code to set the proper width, which I was hoping to avoid :(
Sep 26 '07 #3
hafthor
16
Without knowing the number of columns, and if the content is unequal, then it's not possible.
"Things are only impossible until they're not."

http://freachable.net/2007/11/02/AutomaticEqualWidthColumnsInHTMLTables.aspx

The trick involves styling the table column with a small percentage width.

<style>
table.equalwidthcolumns tr td { width:5%; }
</style>
Nov 2 '07 #4
drhowarddrfine
7,435 Expert 4TB
There are two problems with this little trick.
1) It's a trick. Don't rely on magic and illusions.
2) It doesn't work. At least not in standards mode which is all you should use anyway. It appeared to work in quirks but I'm not sure if the last column worked correctly (forgot to look).
Nov 2 '07 #5
hafthor
16
There are two problems with this little trick.
1) It's a trick. Don't rely on magic and illusions.
2) It doesn't work. At least not in standards mode which is all you should use anyway. It appeared to work in quirks but I'm not sure if the last column worked correctly (forgot to look).
1. Yep. It's a trick, but a reasonable one. Same as doing two fixed width tables and a third that is "100%" which is the trick to make it take up the remaining space. I would rely on it. But do be wary of tricks in general.
2. It does work in xhtml/strict mode, unlike some other tricks I've done like height=100% img stretching. The last column does size correctly.

http://hafthor.com/tricks.html
Nov 4 '07 #6
drhowarddrfine
7,435 Expert 4TB
Your link doesn't work in Firefox.

Never use tables for layout.
Nov 4 '07 #7
hafthor
16
Your link doesn't work in Firefox.
Looks fine for me. What's it doing? (BTW: The top half is not suppose to look right.)

It looks fine from iPhone Safari too.
Nov 5 '07 #8
drhowarddrfine
7,435 Expert 4TB

Nov 5 '07 #9
hafthor
16

<busted>Dang.</busted>
Nov 5 '07 #10
Plater
7,872 Expert 4TB
Your link doesn't work in Firefox.
I used Firefox 2.0.0.9 and the lower section of the page had columns that were exactly equal, however in your picture they are certainly not.
Is screen resolution a factor here maybe?

EDIT: actually, after doing a screen shot and draggin pieces around, the last column DOES fall a little short, by 3 pixels
Nov 5 '07 #11
drhowarddrfine
7,435 Expert 4TB
More than 3px. It's off by more than 100px.
Nov 6 '07 #12
Plater
7,872 Expert 4TB
More than 3px. It's off by more than 100px.
I only compared the very bottom row's columns. I was lazy.
And I guess when it said "it works" I should have said "it looks the same in ie6 and in FF2"

See this image:
http://farm3.static.flickr.com/2277/...1d2978e0_o.png
Nov 6 '07 #13
hafthor
16
<busted>Dang.</busted>
It also doesn't render correctly in either mode on NN9. That's unfortunate. Safari and Opera seem to render it fine.

In looking at the HTML spec, I noticed with proportional width stuff. It's too bad it seems to be geared toward allocation of remaining space. It would be nice if something got rolled into a future spec to support proportional width before content width applied.

Good catch.
Nov 6 '07 #14
hafthor
16
In trying a table-free four button stretching div, this was what I came up with

[HTML]<html><head><style>
div { width:100%; border:0; padding:0; margin:0; border-collapse:collapse; }
div span { width:25%; border:0; padding:0; margin:0; border-collapse:collapse; }
</style></head><body style='border:0; margin:0; padding:0;'><div>
<span style='background-color:red;'>1</span>
<span style='background-color:green;'>the numeral two</span>
<span style='background-color:blue;'>3</span>
<span style='background-color:cyan'>the numeral four</span>
</div></body></html>[/HTML]

That is no good. Resizing that in IE7 makes 4 jump around. Setting the width to something slightly less than 25% is dumb. Setting nowrap would just cause the h-scroll to blink in and out. Clipping would work, but what if I wanted a border around the containing div. Compared with using a table, this seems dirty -- dirty because nothing beyond good math (at a slight discount) will ensure the spans stay on the same line or visible.

Compare the "evil" table way:
[HTML]<html><head><style>
table { width:100%; border:1px solid black; }
tr td { width:25%; border:1px solid red; }
</style></head><body><table><tr>
<td style='background-color:red;'>1</td>
<td style='background-color:green;'>the numeral two</td>
<td style='background-color:blue;'>3</td>
<td style='background-color:cyan'>the numeral four</td>
</tr></table></body></html>[/HTML]

That seems clear to me. It doesn't suffer from the brittleness of the string of spans with rowness implied. Rowness is expressed.

I want to know the right way to do this, but honestly if it involves shaving fractions or absolute positioning or javascript, I'll stick with tables.
Nov 8 '07 #15
drhowarddrfine
7,435 Expert 4TB
That's not what spans are for.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}

li{
list-style-type:none;
float:left;
width:25%;
}
</style>
<body>

<ul>
<li style="background-color:red">1</li>
<li style="background-color:green">the numberal 2</li>
<li style="background-color:blue">3</li>
<li style="background-color:cyan">the numeral 4</li>
</ul>

</body>
</html>[/HTML]
Nov 8 '07 #16
drhowarddrfine
7,435 Expert 4TB
Unless you want to move them around (notice no change in the html except for moving the styling where it belongs):
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}

li{
list-style-type:none;
position:absolute;
width:25%;
}
#red{
background-color:red;
left:50px;
top:50px;
}
#green{
background-color:green;
right:50px;
top:100px;
}
#blue{
background-color:blue;
left:100px;
top:200px;
}
#cyan{
background-color:cyan;
right:150px;
bottom:100px;
}
</style>
<body>

<ul>
<li id="red">1</li>
<li id="green">the numberal 2</li>
<li id="blue">3</li>
<li id="cyan">the numeral 4</li>
</ul>

</body>
</html>[/HTML]
Nov 8 '07 #17
jhardman
3,406 Expert 2GB
Wait a minute, drhowarddrfine. Did you say not to use tables for layout? Isn't the OP trying to print tabular data? Isn't that exactly what tables are for? Maybe you were responding to someone else.

And second, as I understood the w3 definitions of percentage widths for table columns, they were supposed to be interpreted in comparison to each other, not as absolute percentages. I thought giving five columns the widths (in css) of 5% each was supposed to guarantee that they each had the same width and that that combined width would take the whole space available (not 25% of the available)

Jared
Nov 8 '07 #18
jhardman
3,406 Expert 2GB
OP, you can easily count the fields you are about to display before you generate the table, then it is simple math to determine the percentage width of each column.

Jared
Nov 8 '07 #19
drhowarddrfine
7,435 Expert 4TB
Wait a minute, drhowarddrfine. Did you say not to use tables for layout?
Never, ever use tables for layout.
Maybe you were responding to someone else.
Yep, the post before mine.
Nov 8 '07 #20
drhowarddrfine
7,435 Expert 4TB
as I understood the w3 definitions of percentage widths for table columns, they were supposed to be interpreted in comparison to each other, not as absolute percentages. I thought giving five columns the widths (in css) of 5% each was supposed to guarantee that they each had the same width and that that combined width would take the whole space available (not 25% of the available)
No. Width is a percentage of the parent container. So, with <div> you can specify two divs to be 60% wide of their container but they won't be able to fit inline.
Nov 8 '07 #21
drhowarddrfine
7,435 Expert 4TB
I just looked it up and "width" (which is deprecated on td, btw) is only a "suggestion" to the browser but the browser can do as it pleases.
Nov 8 '07 #22
hafthor
16
That's not what spans are for.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<<snip>>
</html>[/HTML]
Nice. That is pretty elegant. Thanks.
Nov 8 '07 #23
hafthor
16
Nice. That is pretty elegant. Thanks.
Well, until I went to add border to the items or the list.
Nov 8 '07 #24
drhowarddrfine
7,435 Expert 4TB
Because the border adds width but percentages add up to 100% so that needs adjusting, or this might work:
border:3px solid yellow;
margin:0 -3px 0px -3px;

but there are lots of combinations to play with.
Nov 8 '07 #25
hafthor
16
Because the border adds width but percentages add up to 100% so that needs adjusting, or this might work:
border:3px solid yellow;
margin:0 -3px 0px -3px;

but there are lots of combinations to play with.
But that's magic and illusions and it doesn't work, but I get the idea. I'll play with it. Thx.
Nov 9 '07 #26
drhowarddrfine
7,435 Expert 4TB
But that's magic and illusions
'Tis not. It's properties of CSS.
Nov 9 '07 #27

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Bijoy Naick | last post: by
2 posts views Thread by David Jones | last post: by
1 post views Thread by Jack Black | last post: by
2 posts views Thread by bgold12 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.