Forum Moderators: open
<table width="200" height="679" border="0" cellpadding="0" cellspacing="0" >
.
.
.
</table>
The problem I’m running into is when I enlarge the browser window; the table wants to stretch out with the browser. So as I drag the browser’s window right to get more real estate, the table wants to grow to the right with the browser. I want to keep this table fixed at 200 px.
Any ideas?
GR
The only other reason I can think of is you have some validation error in the page that's breaking it, run it through the validator.
P.S. I just tested, "it be fine" and fixed at 200. BTW "height" only works in some browsers and is highly unreliable (though CSS seems to work better, for most,) most of the time it's just as well to leave it off.
Supplementary, it's probably advisable to do this instead, with same results:
<table id="my-table" cellspacing="0">
.
.
.
</table>
<style type="text/css">
#my-table { width:200px; height:679px; }
</style>
Cellspacing is needed because there's no attribute that affects it via css (that I know of.)
I tried you suggestions, but still same result....
The table that stretches is contained in another table, defined as:
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="70%" >
Not sure if this is a problem?
One thing to note is the table stretches, but the contents of the table stays fixed. So I define the table, the table stretches, but the content of the table stays fixed. Odd…
2. width="200"... 200 what?
However, your last comment, combined with hers, leads us to a clue:
The table that stretches is contained in another table, defined as:<table width="100%" border="0" cellspacing="0" cellpadding="0" height="70%">
<tr><td>
<table width="200" border="1">
......
Should still render as a 200 pixel wide table with a border with the info provided. Did you test my example above?
However, something else has to be at play here. Is there any CSS connected to this document? Run the following code in any browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
</table>
<style type="text/css">
table { width:100%; border:1px solid #000000; }
</style>
</head>
<body><table width="20" border="0" cellspacing="0" cellpadding="0" height="70%">
<tr><td>
<table id="my-table" width="200" cellspacing="0" >
<tr><td>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah </td></tr>
</table>
</td></tr>
</body>
</html>
Note the outer table is set to 20 (pixels) and the inner table is set to 200 (pixels) which is really impossible - if you removed the CSS, you'll see the outer is pushed to 200 px.
But note the CSS is set to 100% on **any** table element. So both of them indeed expand to full width, overriding the inline markup.
Let's look at another example, a style applied **only** to "my-table"
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
</table>
<style type="text/css">
table { width:100%; border:1px solid #000000; }
#my-table { width:400px; margin:auto; border:1px solid #ff0000; }
</style>
</head>
<body><table width="20" border="0" cellspacing="0" cellpadding="0" height="70%">
<tr><td>
<table id="my-table" width="200" cellspacing="0" >
<tr><td>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah </td></tr>
</table>
</td></tr>
</body>
</html>
The general table selector sets all tables for 100% width, but we have id'ed my-table and added a specific selector for it. Although the width attribute is still 200 (px,) note the CSS says 400px. Hence, you now have a red-bordered table inside the outer table, centered by margin: auto. And the table width is? 400 pixels, overriding the inline attribute.
You **have** to have CSS mucking up the works (or, more accurately, it's doing as it's told and the use of inline attributes are misleading you.) It's the only explanation.
I'll add, you should avoid tables for layout, but this is an old and tired mantra, mostly ignored.
I’ll digest your input, and try some of your suggestions….
I’ll get back to you…again thanks for your input..
GR
GR
Is Suzy UK so distant from old school inline table markup she forgets? :-)
She tells me hasn't had to do inline markup in a while and forget she did ;) LOL, thanks for the pick up!
However in my defence guv', I've noticed over the years that tables are more and more requiring the same accuracy as we're used to in CSS and that often applying the same thinking to them does help.. i.e. a table/table row/table cell height is actually treated as *MIN-HEIGHT* (so the table stretches) - The table-layout algorithms also have restrictions on the width property.. but you have to go the CSS table layout algorithm [w3.org] to get the full low down, reading just the HTML attributes will lead you to believe you can restrict both height and width..
Doctype may also play a part? and it can be quite hard to get tables to behave "the old way" unless in Quirks mode and even then Good browsers won't always play nice because they want to do the 'right' thing
Never thought about the mixed CSS / inline specificity thing, well spotted..
anyway hows my defence case going?
Thanks rocknbil
:)
<table cellspacing="0">
Cellpadding seems to react well with td padding.
GR no message received, but have you tried the above suggestions? Find the CSS linked to the document and remove it, or better yet, the selector affecting tables. It may be buried, like
#content .top-section table { width:100%; }
Or just ID that table and add a selector for it as shown, this should fix it.
I thinks it was useful to others
Thanks
[edited by: tedster at 10:12 am (utc) on Dec. 21, 2009]
I'm completely wrong. :-) It's not the CSS or any other issue mentioned above.
This layout is heavily tabled, which can be extremely confusing, and that is the root of the problem here- confusion, you have the wrong table.
I made a local copy of the page; in that page I searched for just "200". There are many instances, but only one in a table, like this:
<table width="200" border="0" cellspacing="0" cellpadding="0">
Change this table like so, temporarily.
<table width="200" border="3" cellspacing="0" cellpadding="0">
Refresh the page, and note that the table indeed does not change size on browser resize. You have the wrong table. :-)
I tired your suggestions, I see the border (3) on the navigation table, yet the background of the table, or at least what the table is residing on stretches when I enlarge the browser... Yikes!
GR
Regards,
Readie
The only one we can't really control with CSS is cellspacing, which is why you often see<table cellspacing="0">
Take a look at border-collapse:collapse; and you'll never need that html attribute again on your data tables.
Take a look at border-collapse:collapse; and you'll never need that html attribute again on your data tables.
cellspacing="10"
<td width="16%" height="587" valign="top" bgcolor="#348CB4" >
<table width="200" height="679" border="0" cellpadding="0" cellspacing="0" >
So it’s not the table that is stretching, it’s the container 'td' cell element that is stretching. So I see the background of the cell stretch as the background is a different color than the rest of the layout.
I tried setting the td width to a fixed 200 to match the table, but the cell seems to stretch along with the browser window…
The problem really is it's just too deeply nested to spend any time on without compensation, so I think you're going to have to take the hit and reconstruct it.
One thought I had, but didn't pursue, was to remove the background from that cell and make the "200 px width" table that background color. But then you are going to have to do something with the surrounding cells to make it all join correctly - maybe BG color the one cell above it, I don't know.
If it were me, I'd start ripping out tables and re building from scratch. Not a pretty thought, I know, but it might come down to that.
Changing the background of the container cell to white, and the nav table to the desired background color worked! Apparently the container cell is stretching, but not noticeable to the user, and the nav table is fixed with the desired bg color....
Thanks to all that took the time to contribute, very much appreciated....
GR
