Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

html table sizing

Posted on 2004-10-23
13
Medium Priority
?
546 Views
Last Modified: 2006-11-17
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.
0
Comment
Question by:troyd1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
13 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 12387715
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
 
LVL 12

Expert Comment

by:minichicken
ID: 12387740
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
 
LVL 2

Expert Comment

by:udayms
ID: 12387926
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 31

Accepted Solution

by:
seanpowell earned 1000 total points
ID: 12387969
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12389020
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
 

Author Comment

by:troyd1
ID: 12392948
Exactly what I was looking for. Thanks!
0
 

Author Comment

by:troyd1
ID: 12392975
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 12392985
Thanks troyd1, glad we could help out, and thanks for the A :-)

Sean
0
 

Author Comment

by:troyd1
ID: 12393152
Also, I noticed the max-width does not seem to work with the multiple columns using colspan.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12393287
I don't follow you. We're applying min and max width to the table, not the cells...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12393453
... 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
 

Author Comment

by:troyd1
ID: 12395380
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 12395397
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

Featured Post

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

610 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