SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2005
    Posts
    496
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I stop my <td>'s spreading across my 100% width table?

    ...If that made sense?

    Basically, say I've got a header bar in my web app. I want it to go across the screen. On the left I want the page header text, next to that I want some <div> navigation buttons I've made, then on the right hand side of the screen I want a drop list with view options or whatever. Say my code looks like this:

    Code:
    <table style="width: 100%; background-color: blue;">
    <tr>
    <td>Page Title</td>
    <td><div class="button">ADD</div></td>
    <td><div class="button">DELETE</div></td>
    <td style="text-align: right;"><select><option>Whatever</option></select></td>
    </tr>
    </table>
    When I look at this in the browser, the <td>'s width seem to get spread evenly across the whole width of the table. This is not ideal for me. I basically want the page title text and a couple of <div> buttons to be grouped to the left and the view select thingy on the right. I have tried to put exact pixel widths for the <td>s but that ain't too flexible really (say I want to change the text size later etc.)

    Is there a solid way of doing this thing? Should I do away with the <table> altogether? Is there another way of having <div> buttons that can sit happily side by side without having to resort to putting them in separate <td>s?

    Thank you for any help on this issue.
    Little Jim

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <table style="table-layout:fixed; width:100&#37;; background-color:blue;">
      <col style="width:80%">
      <col style="width:5%" span="2">
      <col style="width:10%">
      <tbody>
        <tr> ...
    Last edited by AutisticCuckoo; Jan 10, 2007 at 07:28.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2005
    Posts
    496
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers. But could you possibly explain what these new things do exactly? I haven't encountered them before. It's just so I understand what I'm putting into my code. Thanks for the quick reply.

  4. #4
    SitePoint Evangelist
    Join Date
    Nov 2005
    Posts
    496
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there anyway of making <td>s fit width wise to what's inside them? So say I had the word INVOICES with a <td>..</td> around it, is there not a CSS command or something that will make that <td>s width fit perfectly around that word? Then have somekind of wildcard width * for the next <td> along that can stretch to the end of the table?

    ...If that makes sense.

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by littlejim84 View Post
    Cheers. But could you possibly explain what these new things do exactly?
    The COL element in HTML specifies a table column. HTML tables don't really have a column concept – they consist of rows and cells – but the COL element type allows some rudimentary access to 'columns'.

    There aren't many presentational aspects you can control for an entire column, only these:
    • border properties (but only if the table has border-collapse:collapse)
    • background properties (colour, etc.)
    • the width property
    • the visibility property


    In this example, I set the widths for the four columns. Columns 2 and 3 use the same width, because of the span attribute. Obviously, you need to adapt the actual values.

    The table-layout:fixed property for the table makes browsers use an alternate rendering algorithm. Normally, a browser will first read through the entire table to figure out how many columns there will be and how to distribute their widths proportionally to their contents. Then the table is scanned through once more and rendered. This two-phase process can be noticeably slow for a large table.

    With the fixed rendering algorithm, only one phase is required. The browser will use the first row (or column specifications) to determine the number of columns and their widths. Then it just needs a single pass through the table to render it.

    Quote Originally Posted by littlejim84 View Post
    Is there anyway of making <td>s fit width wise to what's inside them?
    Not really. If you don't declare the width for one or more COL elements, their widths will be determined by the browser. With the fixed rendering algorithm, only the cells in the first row of the table are taken into account, which means that you then need to have the widest content in each column in the first row.

    If you omit table-layout:fixed and omit the width specification for one or more COL elements, you may get closer to what you are trying to achieve. You won't have full control, but it may be good enough.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Evangelist
    Join Date
    Nov 2005
    Posts
    496
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow man, that was well informative!

    Thank you very much

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe there are options in html coding to indicate the width of the table in pixels instead of in percentage. The disadvantage would occur when the browser is not opened to full screen. Sometimes you see little instructions somewhere on a website that say This site is best viewed with SuchandThus Browser opened to 100%. I suppose that will work, in its way, but I personally think these little messages are tacky. What I do is test my sites before I upload them in both IE and Firefox.


Bookmarks

Posting Permissions

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