html table sizing

This is a related 2 part question. Is there a way to say I want my table to be a minimum of a certain number of pixels, but let it go bigger. The second related part is can I say let my table be as small as I want, but no larger than say 700 pixels. Can I do this for the td tags? I am creating dynamic html documents and in some situations depending on the data, this would be very useful.
troyd1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RoonaanCommented:
I think its worth your time to examine CSS and stylesheets. You'll find then quite usefull.

www.w3schools.com/css is a good startof point.

TD width for example can be set using <td style="width:100px;"> which is a kind of combined min and max.

Regards

-r-
0
minichickenCommented:
Hi

In HTML tables, if you want it to be flexible, then you will have to use % for the width instead of px.
% will be flexible, it is relative to the browser window size and it adjusts autmatically.
If you use px and it will be fixed, it will not adjust at all if the broswer window size changes. If you would like to make it fixed on px
and adjust accordingly, you will need to DHTML / javascript for it.

THIS WILL ALWAYS HAVE 80% width of browser window:
<table width="80%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

THIS WILL ALWAYS take up to 800px, no matter what the browser window size is....

<table width="800px"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
0
udaymsCommented:
Hi,
As I understand you need a table thats minimum 'x' pixels and maximum 'y' pixels? Of course, the rows will be dynamic. But can you please post the table structure? I.e How many columns are we looking at on an average.?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

seanpowellCommented:
Cross-browser, min and max width tables:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">

body
{
     margin:0;
     padding:0;
}

#mytable
{
     border:1px solid black;
     /* for modern browsers */
     min-width:600px;
     max-width:800px;
     /* for Internet Explorer */
     width: expression((this.parentNode.clientWidth > 800)?800+"px":(this.parentNode.clientWidth <= 600 + 0)?600+"px":"100%")
}

</style>
</head>
<body>

<table id="mytable">
     <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
     </tr>
</table>

</body>
</html>

Thanks,
Sean
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
Hmm...

Sean's way of doing it is a little cleaner than the way I used to use.  Think I'll steal That. ;^)

Cd&
0
troyd1Author Commented:
Exactly what I was looking for. Thanks!
0
troyd1Author Commented:
A little more explanation for udayms. This will really come in handy when I am creating reports. Sometimes I will end with something like the folowing with these columns:

Nbr    Item     Desc    Qty


What this will allow is for me to set a max width for nbr and qty so that it will not be overly large, but if item or desc needs the space, it can be allocated to them and not be wasted white space causing the column to wrap.

Troy
0
seanpowellCommented:
Thanks troyd1, glad we could help out, and thanks for the A :-)

Sean
0
troyd1Author Commented:
Also, I noticed the max-width does not seem to work with the multiple columns using colspan.
0
seanpowellCommented:
I don't follow you. We're applying min and max width to the table, not the cells...
0
seanpowellCommented:
... just looked at the code I posted which was the wrong one - and perhaps why it may have casued confsion. Sorry...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">

body
{
      margin:0;
      padding:0;
}

#mydiv
{
      min-width:500px;
      max-width:800px;
      /* for Internet Explorer */
      width: expression((this.parentNode.clientWidth > 800)?800+"px":(this.parentNode.clientWidth <= 500 + 0)?500+"px":"100%")
}

#mytable
{
      border:3px solid #666;
}

#mytable td
{
      padding:4px;
      border:1px solid #999999;
}

</style>
</head>
<body>

<div id="mydiv">
<table id="mytable">
     <tr>
          <td>Nbr</td>
          <td>Item</td>
          <td>Desc</td>
          <td>Qty</td>
     </tr>
     <tr>
          <td>data data data data</td>
          <td>data data data data</td>
          <td>data data data data data data data data data data data data data data</td>
          <td>data data data data data data data data data data data data data data</td>
     </tr>
</table>
</div>

</body>
</html>

as to what you're doing with the cells, I'm not sure...

Sean
0
troyd1Author Commented:
I wanted to use it on the table, div, and/or td tag. Are you saying this will only work on the div tag?
0
seanpowellCommented:
Yes, that's why I thought I may have confused you, as the example I had posted was an earlier IE version only.

As far as the spec goes, tables (or inline elements) do not directly support min and max width.

Sean
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

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.