Max Table Width

[Amezis 0]

Well, I have a table that I don't want to be over 350 pixels in width - even on the largest screens. On small screens, the table will be smaller. But on large screens, I don't want the table to larger than 350 pixels... Is there a way to do that?

[sxyloverboy 0]

<table width="350"> bla </table>

or you can do it in css. ill explain that too if you want me too.

[Amezis 0]

Duh, of course I know about that. But if I have a table width like that, there will be a horizontal scrollbar on smaller screens. I want that smaller screens have a smaller table (around 300px). And larger screens have 350px. Is that possible?

[arboc7 0]

I believe that using the CSS property "max-width" you can do that. Just use the following:

<table style="max-width:350px;">

Note that this may not be compatible with every browser since it is defined in CSS2.

Hope this helps!

[Tyssen 0]

I believe that using the CSS property "max-width" you can do that. Just use the following:

<table style="max-width:350px;">

Note that this may not be compatible with every browser since it is defined in CSS2.

Hope this helps!

Max-width (or max-height) doesn't work in IE. You need to set a percentage width. Work out roughly what proportion of the screen you want to take up and then no matter what size the screen is, it'll always take up the same proportion.
So at a viewport of 800px, 350px would be about 45%, so width="45%".

[galexcd 0]

Max-width (or max-height) doesn't work in IE. You need to set a percentage width. Work out roughly what proportion of the screen you want to take up and then no matter what size the screen is, it'll always take up the same proportion.

So at a viewport of 800px, 350px would be about 45%, so width="45%".

182446[/snapback]

you can do it a more complicaated way by using javascript. You can get the width of the window in javascript, and do a document.wright and an if statement

 

 

Example:

<script language="javascript">var widthOfScreen = document.body.clientWidth;var tableWidthif(widthOfScreen>34){  tableWidth="34";}else{   tableWidth="100%";}document.write("<table width="+tablewidth+">");</script>

Almost all browsers support javascript!

oh... one problem, document.body.clientWidth does NOT work with netscape... sorry

 

Any questions?

[Tyssen 0]

Any questions? 

Yeah: why would you want to do it a more complicated way when there are easier options?

[Lozbo 0]

Yeah: why would you want to do it a more complicated way when there are easier options? 

190868[/snapback]

So what would be the easier options? I know about max-with and its compatibility issues, but i think that javascript would do fine.

 

Do you know what pecentage of web surfers have blocked js in their browsers?

[galexcd 0]

Yeah: why would you want to do it a more complicated way when there are easier options? 

190868[/snapback]

um because this will work with almsot every browser!

[Tyssen 0]

um because this will work with almsot every browser!

191027[/snapback]

Not if they've got js turned off it won't.

And if you know what you're doing with CSS, there are work-arounds to get IE to accept min-width & min-height.

[galexcd 0]

Not if they've got js turned off it won't. 

And if you know what you're doing with CSS, there are work-arounds to get IE to accept min-width & min-height.

191931[/snapback]

how many browsers do you know nowadays that dont have js enabled?

Only weird people dont enable js on their browsers, or they do it to tempararily test something.

[Tyssen 0]

how many browsers do you know nowadays that dont have js enabled?Only weird people dont enable js on their browsers, or they do it to tempararily test something.

It's not browers; it's users and you'd be surprised at the number. It's generally not something that individual users do, but rather IT departments looking after big networks of computers that only want users to have the minimum of functionality.

[iGuest 3]

My first time here, and I noticed this question on max-width.The problem of course is that IE doesn't recognize that property, but there IS a way around it. Unfortunately, the line of code wont validate, but blame IE for that, for not having a decent browser!!This will apply to a main content table too, so you can go full width, but stop it expanding beyond a certain point. Say 1000px, that way you don't get your line length too long for comfortable reading.Suppose you want the table to expand to 500px, but no wider?In your style sheet, put the max-width: 500px; in the correct place. (in the body} section)Now, you need to define how your table displays with IEso add in this.table {width:expression(document.body.clientWidth > 500? "500px": "auto" );}This is for IE....it will work on versions above 4.What it's saying, is, is the table wider than 500px? If so, make it 500px....anything below will expand to an auto width.Firefox will ignore this, and IE will ignore the max-width, so you need both of them.Unfortunately, the ? will stop a clean validation, but thats about the easiest way around the problem. There are other solutions, using ems, but they are more complex.If only IE would design a compliant browser, these sort of problems wouldn't arise!Cheers, Jonny.-Jonny

[iGuest 3]

thanks, man

Max Table Width

 

Jonny, thanks man. You not only helped me control my table width, you also opened up a new galaxy for me-- css expressions.

 

People named jonny are tops.

 

-reply by johny