Restrict Table Width

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
jezellaAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
seanpowellConnect With a Mentor Commented:
>> 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
 
hhammashCommented:
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
 
hhammashCommented:
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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
jezellaAuthor Commented:
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
 
seanpowellCommented:
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
 
hhammashCommented:
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
 
seanpowellCommented:
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
 
jezellaAuthor Commented:
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
 
jezellaAuthor Commented:
I think that I have the asker.  I still have the tables set as 100% and this is overiding the script.

Jezella
0
 
seanpowellCommented:
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
 
jezellaAuthor Commented:
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
 
seanpowellCommented:
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
 
jezellaAuthor Commented:
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
 
seanpowellCommented:
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
 
jezellaAuthor Commented:
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
 
seanpowellCommented:
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
 
jezellaAuthor Commented:
Hi Sean, I think so and I am having a go at putting together a CSS that I hope works.

Jezella
0
 
jezellaAuthor Commented:
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
 
jezellaAuthor Commented:
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
 
seanpowellCommented:
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
 
mreuringCommented:
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
 
seanpowellCommented:
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
 
mreuringCommented:
You'll NEED scotch for that one :) Down one for me while you're at it ;)

Martin
0
 
jezellaAuthor Commented:
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
 
Om JoshiSr. System AdministratorCommented:
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
 
mreuringCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.