Can max-width be made to work for tables.

  • Thread starter Thread starter AAaron123
  • Start date Start date
A

AAaron123

Just for testing I have the following.

<form id="FormMaster" runat="server" style="border: pink 9px Ridge;
max-width: 770px;

<table id="TableMain" style="border: Maroon 9px Ridge; max-width: 750px;
width: 750px">

On the table max-width does not appear to work.

The marron border is much wider that the pink one.



Can max-width be made to work for tables.



Thanks
 
Just for testing I have the following.

<form id="FormMaster" runat="server" style="border: pink 9px Ridge;
max-width: 770px;

<table id="TableMain" style="border: Maroon 9px Ridge; max-width:
750px; width: 750px">

On the table max-width does not appear to work.

The marron border is much wider that the pink one.



Can max-width be made to work for tables.
Click to expand...

I am not sure what you are attempting to do here, as the code you have
here shows me nothing.

In the first table, you state width = whatever is necessary for the crap
I shoved in the table, but no more than 770 pixels. This means, if it is
an empty table, the table is very small.

In the second table, you state width = 750 pixels and the max width is
750 pixels, so it will be 750 pixels wide no matter what you do.

The way to test the difference in max pixels is to fill the table with a
garbage string of text or something else that will make it expand. For
example, set two images side by side that equal the larger max width
(770px, but minus the border on each side, cell padding, etc.). Then
stick the images in two tables. The larger should end up with the images
side by side, as it can expand to 770 pixels and the smaller should
stack them.

The problem, however, is 2 pixels does not leave you much room for error
in you calculations. Forget to add one cell padding value or cell
spacing value and both will wrap, leading you to believe, as you do with
your "this one has width, this one does not" experiment, that the code
is not working.

Peace and Grace,


--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA

Twitter: @gbworld
Blog: http://gregorybeamer.spaces.live.com

*******************************************
| Think outside the box! |
*******************************************
 
Gregory said:
I am not sure what you are attempting to do here, as the code you have
here shows me nothing.

In the first table, you state width = whatever is necessary for the
crap I shoved in the table, but no more than 770 pixels. This means,
if it is an empty table, the table is very small.

In the second table, you state width = 750 pixels and the max width is
750 pixels, so it will be 750 pixels wide no matter what you do.

The way to test the difference in max pixels is to fill the table
with a garbage string of text or something else that will make it
expand. For example, set two images side by side that equal the
larger max width (770px, but minus the border on each side, cell
padding, etc.). Then stick the images in two tables. The larger
should end up with the images side by side, as it can expand to 770
pixels and the smaller should stack them.

The problem, however, is 2 pixels does not leave you much room for
error in you calculations. Forget to add one cell padding value or
cell spacing value and both will wrap, leading you to believe, as you
do with your "this one has width, this one does not" experiment, that
the code is not working.

Peace and Grace,



*******************************************
*******************************************
Click to expand...

I'm sorry, I should have said that what I presented is above all my markup
that fills the tables.

The markup is quite long.

And the table width does not appear to be constrained at all in the dispay.

It expanded to fit the data inside.

Above the two I showed is:
<body id="BodyMaster" runat="server" style="border: green 9px Ridge;
max-width: 800px;

This also dispalys as expeced - a little wider than the pink border.

But the marron border (table's) is wider than both.



What I'm, seeing seems to be at odds with your comment.
In the second table, you state width = 750 pixels and the max width is
750 pixels, so it will be 750 pixels wide no matter what you do.
Click to expand...

I have seen a comment on the Internet Tha max-width is supported by most
browsers.

Also saw one that said that it is not supported by IE but I checked in FF.

I also tried adding overflow:hidden to the table's style but that had no
effect.

Don't know what to try next.


Thanks
 
Don't know what to try next.
Click to expand...

Step back to the problem you are trying to solve, not the implementation.
This is generally what I find the most useful when I am stuck.

I wish I could give you a more definitive answer, but I don't have a
working example to view, nor enough code to say "change line 10 and you
will be fine".

I am also not sure I completely understand the problem.

Peace and Grace,


--
Gregory A. Beamer
MVP; MCP: +I, SE, SD, DBA

Twitter: @gbworld
Blog: http://gregorybeamer.spaces.live.com

*******************************************
| Think outside the box! |
*******************************************
 
Gregory said:
Step back to the problem you are trying to solve, not the
implementation. This is generally what I find the most useful when I
am stuck.

I wish I could give you a more definitive answer, but I don't have a
working example to view, nor enough code to say "change line 10 and
you will be fine".

I am also not sure I completely understand the problem.

Peace and Grace,



*******************************************
*******************************************
Click to expand...



The problem is just that I have max-width defined for body, form and table
but the table width is wider than its max-width.

I can pull rows out of the table until I find the culprit.
Maybe that will tell me something.

The reason for my post is to see if someons said:
Oh year, max-width has problems...
But I understand you believe it works OK.

Thanks
 
in html, width refers to the elements content width, so it:

[left-margin][left-border][left-padding][width][right-padding][right-border][right-margin]

so in your case the total width of your table (assuming padding=0 and
margin=0) is 750 + 9 + 9 = 768. of course if the the rows are wider than
this (and don't have a proper overflow specified), they will expand the
width.

-- bruce (sqlwork.com)
 
bruce said:
in html, width refers to the elements content width, so it:

[left-margin][left-border][left-padding][width][right-padding][right-border][right-margin]

so in your case the total width of your table (assuming padding=0 and
margin=0) is 750 + 9 + 9 = 768. of course if the the rows are wider
than this (and don't have a proper overflow specified),

they will expand the width.
Click to expand...

even past max-width?

I found out that the <asp:Menu> element appears to dominate.
The width will reduce untill it just fits the menu.
Then the width will not reduce any further.
If I make the menu narrower the width will reduce more and all the other
cells shrink OK.
So I'm using a smaller text for the menu and now things work OK.
I was going to look at using the Friendly (I think that's what it is called)
menu but I believe the next framework revision redoes its menu and I didn't
want to have to learn the Friendly method and then have to start over when
framework 4 is available.

Thanks
 
Back
Top