Solved

html table sizing

Posted on 2004-10-23
506 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
Question by:troyd1
    13 Comments
     
    LVL 49

    Expert Comment

    by:Roonaan
    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
    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
    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
     
    LVL 31

    Accepted Solution

    by:
    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
    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
    Exactly what I was looking for. Thanks!
    0
     

    Author Comment

    by:troyd1
    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
    Thanks troyd1, glad we could help out, and thanks for the A :-)

    Sean
    0
     

    Author Comment

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

    Expert Comment

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
    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.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    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 …

    877 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

    14 Experts available now in Live!

    Get 1:1 Help Now