www.webdeveloper.com
Results 1 to 5 of 5

Thread: Reseting table width

  1. #1
    Join Date
    Mar 2005
    Posts
    61

    Thumbs up Reseting table width

    Hello,

    I have a css which sets all table width for 100% but in 1 case (for my navigation table) I don't want it. If I set it to 0 than the text in td tags will be written im more lines but I want to use the defined td with values.
    How can I do it?

    Thanks!

    Now my css looks like this:
    Code:
    #navigation {
      width:600px;
      margin-left:auto;
      margin-right:auto;
    }
    
    table {
      width:100%;
    }
    
    table#navi {
      text-align: right;
    }
    
    table#navi td#first{
        text-align:left;
        width:100px;
    }
    
    table#navi td{
        width:20px;
        height:20px;
    }
    
    table#navi td#naviact{
        width:20px;
        height:20px;
    }
    And the html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <link href="stylenavi.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <div id ="navigation">
            <table id="navi" align="right"><tr>
              <td id="first">Page 2 of 8</td>
              <td><a href="list.php?page=1">First</td>
              <td><a href="list.php?page=1"><</td>
              <td><a href="list.php?page=1">1</td>
              <td id="naviact">2</td>
              <td><a href="list.php?page=3">3</td>
              <td><a href="list.php?page=3">></td>
              <td><a href="list.php?page=8">Last</td>
          </tr></table>
        </div>
    
      </body>
      
    </html>

  2. #2
    Join Date
    Mar 2006
    Posts
    42
    remember one wide td can cause other td's in the same column to stretch to the widest cell or td. you have one set to 100 and the rest to 20.

    If I set it to 0 than the text in td tags will be written im more lines but I want to use the defined td with values.
    by more lines, are you wanting them to be on different rows within the same td? u can still use a br tag inside a table cell to do that if you need to. or just simply use multiple rows.
    Last edited by deweydesigns; 03-27-2006 at 08:11 AM.
    how do i add a picture here?

  3. #3
    Join Date
    Mar 2005
    Posts
    61
    Hello,

    I want to put the text "Page 1 of 1 | 1 | 2 | 3 |" into one line but want the line as short as possible and aligned it to right.
    I want to make a navigation panel as here in this forum too.
    So if I set a width value for the navi table than the td-s width value (defined in the css) will not used. If I didn't set any width value than my table will be 100% width and I don't want it eigther.

    Everything works fine for navi table if I remove the table{ width:100% }. Of course in this case the other tables layout will be bad.

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746

    without seeing your actual work...

    what you want then, is a navigation bar (which is a TABLE) be less than 100% (let's say then, 300px wide), and have other TABLES be 100% width and not affect the width of the navigation TABLE?

    Give the TABLE of the navigation an [ id="navigation" ], and in your style, do something like this:

    table #navigation {width:300px;}

    and to force it to stay to the right, something like

    table #navigation {width:300px; float:right;}
    (untested, but you get the idea...)

    This will make the TABLE called "navigation" be just 300px wide, and stay always pushed towards the right-hand side of the user's browser screen.

    From your code,it looks as if you almost have this figured out.

    And for 'the navigation panel like here' (I don't know exactly what you're asking for here) do you mean the breadcrumb links like:

    WebDeveloper.com > client-side development > CSS

    This thing? If so, this is called 'breadcrumb', and something exactly like this can be found and freely used, from http://www.dynamicdrive.com

    Is this anything close to what you're asking for?


    -Joel
    Last edited by WebJoel; 03-26-2006 at 05:19 PM.

  5. #5
    Join Date
    Mar 2005
    Posts
    61
    Hello,

    sorry it seems my explanation was not really good. So what I want: If you visit the main CSS topic on this forum than members can write "new thread" on the left side and there is a "page navigation panel" on the right. This panel looks like
    "Page 1 of 14 | 1 | 2 | 3 | > | Last"

    The table total width should be different depends on how many record was found. It can be "Page 1 of 1 | 1 |" or "Page 1 of 5 | 1 | 2 | 3 | 4 | 5 " and so on. The total table width should be 100+20px for the first version and 100+5*20 for the second.

    So
    1. If I set no width for my navigation table than it will inherit the 100% and so the width will be 600px as the div tag.
    2. If I set the 300px for table width than again the td tags will be wider.
    3. If I set 0px for the table width than the td tags will will be smaller than defined in the css.

    It should be possible not to define the width:100% for the general table, but set an id or class for all tables on the page. But I don't want to use this way (if possible).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles