Solved

Restrict Table Width

Posted on 2004-10-20
26
3,684 Views
Last Modified: 2013-12-24
This could well be a question not asked before as it is only recent that monitor sizes could become an issue.

The question:-

Is possible to restrict a table width to x% subject to a maximum pixel width.

The question here may not be clear so consider that 1 pc monitor is of 15' and another is of 23'.  In the case of the 15' monitor having a table width of 95% would result in a page without scroll bars as the table would be lengthened instead.  However, in the case of the 23' monitor, the contents of the table could become unacceptable.  Now, should the table width be set in pixels and the page viewed on a small monitor or one where the history pane remains visable, where pixels have been specified to determine width, this again results in scroll bars.  Hence, is possible to restrict a table width to x% subject to a maximum pixel width.

Jezella
0
Comment
Question by:jezella
  • 10
  • 9
  • 3
  • +2
26 Comments
 
LVL 14

Expert Comment

by:hhammash
ID: 12360692
Hi,

If you want your website to look the same in all screens and all resolutions,  you better use pixels.  I always use pixles to specify table width.

You can use a fixed percentage like 09% of any window.  But still,  pixels behave better.

Unless you want your table to stretch in all monitors and/or resolutions.

hhammash
0
 
LVL 14

Expert Comment

by:hhammash
ID: 12360714
Hi,

You can also create a table with one row and one column with 100%.  Inside this table create a table with two columns.  Keep the column to your right unused. Either put % or pixels.

hhammash
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 250 total points
ID: 12368135
>> is it possible to restrict a table width to x% subject to a maximum pixel width.

Absolutely, like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">

body
{
      width:100%;
      margin:0;
      padding:0;
}

#content
{
      width:100%;
      border:1px solid black;
      max-width:800px;
      width:expression(document.body.clientWidth > 800? "800px": "100%" );

}

</style>
</head>
<body>

<table id="content">
      <tr>
            <td>This table will never be wider than 800 pixels.</td>
      </tr>
</table>

</body>
</html>

Thanks,
Sean
0
 

Author Comment

by:jezella
ID: 12368248
This really is good news Sean. But I have one problem which I've had for some time and that I've not figured yet.

In the case of the top line of code:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

When I have included this code it causes my navigation bar to place itself top left.

The following link shows this  http://www.ashley-wedding-cars.co.uk/temp.htm  if you click any link on this illustation link, you are taken to pages without this DOCTYPE code and things are fine.

Must I use this DOCTYPE code and also what is it doing?

Jezella

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12368363
You should if you can - it helps make your site more consistent cross-browser.

As to why that's happening, you need to specify a pixel value in the udm-custom.js file: (lines 31 and 32)

      "13px",      // x position ["em"|"px"|"pt"|"0"]
      "135px",      // y position ["em"|"px"|"pt"|"0"]


Thanks,
Sean
0
 
LVL 14

Expert Comment

by:hhammash
ID: 12368406
Hi,

Try to use:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
instead of
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12368460
hhammash,

If you do that, you put the browser back into quirks rendering mode, which is not a good idea if you're concerned with supporting more than 1 browser...

Sean
0
 

Author Comment

by:jezella
ID: 12369226
Thanks for the input hhammash, all comments help in one way or other.  

Sean, you are an expert, yes I was missing the px so that all works fine now.  Just one little point here.  Do I only need to add the style as below in my head ONLY or do I need to alter current tables?   I realize that parts of the style need to be set to my requirements.

<style type="text/css">

body
{
     width:100%;
     margin:0;
     padding:0;
}

#content
{
     width:100%;
     border:1px solid black;
     max-width:800px;
     width:expression(document.body.clientWidth > 800? "800px": "100%" );

}

</style>


Rest of my normal page code here.

I have tried as above but www.ashley-wedding-cars.co.uk/temp.htm seems not to work as expected. Sorry for not understanding fully.

Jezella
0
 

Author Comment

by:jezella
ID: 12369299
I think that I have the asker.  I still have the tables set as 100% and this is overiding the script.

Jezella
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12369301
That's okay...

The CSS was actually just an example :-)

Since your html is this:
<table border="0" width="100%" id="table1">

the CSS needs to match the id of your table:

#table1
{
     width:100%;
     max-width:800px;
     width:expression(document.body.clientWidth > 800? "800px": "100%" );
}

Wherever you have your main CSS, just add the new CSS in there - it doesn't need to be inline on every page.

Thanks, let me know...
Sean
0
 

Author Comment

by:jezella
ID: 12369484
I can see that this really is going to be great.  I've had 2 other tries and things are looking good.

www.ashley-wedding-cars.co.uk/temp2.htm

without the nave bar.

www.ashley-wedding-cars.co.uk/temp3.htm

with the nav bar.  This results in the navbar being in the wrong place but I can see that the position setting needs to be relative to the table.

It is unfortunate that my pages are not full CSS so I suppose that I still need to inc. this in each page.

To be fair Sean, you have answered in full, my initial question. So I ought to post another for additional help.

Jezella
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12373686
Thanks Jezella,
Sorry - the day got crazy over here. Thank god I'm the boss or I would have been fired :-)

It looks like you've made excellent progress - I only wish the site (as you noted) was more CSS based. Next time, okay ? It really does help :-)

Sean
0
 

Author Comment

by:jezella
ID: 12374058
Yes Sean you're right about the CSS.  Site runs at about 300 pages but sometime before things really do get out of hand I'll have to study CSS and start to change it.

You have been a great help Sean.

I know that the question is closed, but just as a matter of interest would the following min spec. inclusion work?

width:100%;
     border:1px solid black;
     max-width:800px;
     min-width:600px
     width:expression(document.body.clientWidth > 800? "800px": "100%" );

Jezella
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 31

Expert Comment

by:seanpowell
ID: 12374180
That's quite allright Jezella :-)

So, here's what we need to do to create a table that never gets smaller than 600 or wider than 800:

#table1
{
     border:1px solid black;
     min-width:600px;
     max-width:800px;
     width: expression((this.parentNode.clientWidth > 800)?800+"px":(this.parentNode.clientWidth <= 600 + 0)?600+"px":"100%")
}

Just make sure that your padding and margin are set to 0 on the body tag.

Thanks,
Sean

n.b. 300 pages - could be worse... Once that page gets set up, it's not so bad.  And worth it :-)
0
 

Author Comment

by:jezella
ID: 12379040
Thanks Sean. This gives me the best of all worlds.  I shall need to do some work as to CSS because the problem I now face with using the above is that my print page becomes all messed up.  I'm sure the reason for this is the order in which styles are read as I do have a onprint.CSS.

i.e.

specific element
then
on page style
then
imported syle

If that makes sense.

All my pages work well for print preview and then print where the above additional code is not present .  But this changes with the above code included as is IN THE PAGE itself.

Jezella


0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12379150
Well, that code really shouldn't be in the page - it should be in the regular CSS file. The print CSS should have:

#table1 { width:100%: }

Does that make sense?

Sean
0
 

Author Comment

by:jezella
ID: 12404662
Hi Sean, I think so and I am having a go at putting together a CSS that I hope works.

Jezella
0
 

Author Comment

by:jezella
ID: 12409149
Hullo Sean I hope you read this cos I'm a bit stuck.

I've created a basic linked CSS to the following page http://www.ashley-wedding-cars.co.uk/yell2.htm and it really does work a treat with total control over max and min table widths.

The problem is on print prewiew.  All my other pages produce a print preview and printed page without loss of webpage content.  In the case of the above link, this is not the case where the edge of the page is lost.

As you mentioned above, I have also included #table1 { width:100%: } in my print.css

If you could point me in the right direction it would be most appreciated.

Jezella

 
0
 

Author Comment

by:jezella
ID: 12409165
PS. Here is my acs.css

#table1
{
     border:1px solid black;
     min-width:750px;
     max-width:950px;
     width: expression((this.parentNode.clientWidth > 950)?950+"px":(this.parentNode.clientWidth <= 750 + 0)?750+"px":"100%")
}


.p2          { font-family: Arial; font-size: 12pt; color: #000080; text-align: left;
               margin-left: 10px; margin-right: 10px }
.p1          { color: #FF0000; font-family: Arial; font-size: 12pt }

.p3          { font-family: Arial; font-size: 10pt; color: #000080; text-align: center}
.rear_nav          { font-family: Arial; font-size: 10pt; color: #000080; text-align: left}
.brochure_but       { font-family: Arial; font-size: 10pt; color: #000080; text-align: left}

.picture      {margin-left: 10px; margin-right: 30px }

AND MY print.css

#table1 { width:100%: }


/* don't print the navbar heading */
#navbar { display:none !important; }

/* don't print the navbar and menus */
.udm { display:none; }



/* noprint class */
.noprint, .skipCode, .accessLinksMiddle, #footerSearch {
      display:none !important;
      }
      
/* global coloration */
* {
      color:#000;
      background-color:#fff;
      }
      
      
/* nullify some element margins and padding */
a,strong {
      margin:0;
      padding:0;
      }
      
      
      
      
/* expand abbr and acronym */
abbr,acronym {
      border-bottom:none;
      }

abbr:after,acronym:after {
      content:" (" attr(title) ")";
      }


/* expand hrefs */
a[href^="#"]:after {
      content:" (http://www.udm4.com/" attr(href) ")";
      }

a[href]:not([href^="#"]):not([href^="http://"]):not([href^="mailto:"]):after {
      content:" (http://www.udm4.com" attr(href) ")";
      }
      
a[href^="http://"]:after {
      content:" (" attr(href) ")";
      }
a[href^="mailto://"]:after {
      content:" (" attr(href) ")";
      }


Jezella
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12466592
Jezella,

My apologies, I've been swamped.
There's 2 things:

1. We can't apply min-width or max-width directly to the table, I though Moz supported this but it doesn't. So we need a parent container instead. That part is easy.

2. I've run your print issue through IE a dozen times, and there's no question that the expression is overriding EVERYTHING. What suprises me is that I never noticed this before. I thought I had tested it once when another expert here (mreurings) originally came up with the expression, but clearly I didn't.

3. Although I'm sure you're not crazy about, I love the fact that this isn't working, because it allows for more exploration of a mystery. I'm going to try and contact Martin to see if he had ever noticed this behaviour, it would not suprise me if he's already pinned down the problem. As far as I can tell, it's a matter of isolating the expression into the original body tag for screen use only.

I'll be back...

Sean
0
 
LVL 17

Expert Comment

by:mreuring
ID: 12467433
Hey Sean,

I think this one slipped by you on the CSS section:
http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21186031.html#12439272
 I've been quite inactive recently due to major headaches in trying to master EJB (Java serverside coding) but was checking in on EE just to get a distraction, imagine my surprice with running into this puzzle based on an expression I had written.

 Martin

P.S. I did only skim through this question, but I think this is where Jezella and me went on with the issue.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12467462
Holy Smokes!
Yes, I missed it, I've been up to my ears as well. I'm going to dissect what you did over scotch this evening.

Thanks Martin - was just reading up on your help with IE7...
Sean
0
 
LVL 17

Expert Comment

by:mreuring
ID: 12467529
You'll NEED scotch for that one :) Down one for me while you're at it ;)

Martin
0
 

Author Comment

by:jezella
ID: 12467621
Sean and Martin. This to my mind works a real treat now and I'm pleased that you enjoyed the challenge.  I would never have solved it I'm, sure so I thank you both. And now back to trying to learn a bit about CSS.

Jezella
0
 

Expert Comment

by:Om Joshi
ID: 20799803
hi,

i would like to restrict the width of Table and as well.. i would like to restrict the length of text that it will not beyond few characters/or words like 100 characters or 15 words more words will fall into next line.

i would like to achieve this thing because i want to use that particular template in Ms Outlook 2003.

i am looking forward to have some solution.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 20817321
Hi ontljoshi,

The solutions provided on Experts Exchange are provided by volunteers. I am one of those and I helped solve this issue. In order to give us something in return we earn points from answering questions, look at them as bragging rights.
Now, you may have guessed where I'm going, we cannot start providing help to secondary questions, especially not so when asked by someone who wasn't involved in it in the first place. Also, the only reason I noticed your comment is because I am already involved in this question. Sean is no longer active and Jezella is not a volunteer.
Since I'm not going to answer your question and nobody else will notice your remark I advice you to open your own question at http:/Web_Development/Web_Languages-Standards/HTML/, since your remark isn't actually about frontpage either.

Regards,

 Martin
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Web Developer 7 266
Eclipse for PHP 1 91
Intranet for business 4 116
Blue Coat API portal URL 2 120
When deciding to adopt any help desk solutions many factors should be explored before taking decisions. This will change from business to another but in general there are some kind of rule of thumb. Here are some quick tips: Do we need only ticket…
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now