?
Solved

html table sizing

Posted on 2004-10-23
13
Medium Priority
?
551 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
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

599 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