SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute cell width in table

    Hello!
    When I make a table like this, the cell's width between cell1 and cell2 is not 10px.

    Is it possible to make table so that cells's width stays 10 pixels whitout define more width's?

    example:

    HTML Code:
    <table border="1">
    <tr>
    <td colspan="3">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
    </tr>
    <tr>
    <td>
    cell1</td>
    <td width="10"></td>
    <td>
    cell2</td>
    </tr>
    </table>

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do these two things:

    First, use css in the cell you want to set the width of, instead of "width="10"":

    <td style="width: 10px;"></td>

    Also, you might need to set the widths of cell1 and cell2 in the same way. That worked for me when I tested it.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2009
    Location
    Baton Rouge, LA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's never going to work unless you set a width on the table itself. If your numbers are not adding up to a particular table width, IE will surely ignore all your efforts. Somebody please prove me wrong!
    "The browser is your first client" - Quote: Myself
    Please visit me at: vanillacloud.com

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Thundercow View Post
    First, use css in the cell you want to set the width of, instead of "width="10"":

    <td style="width: 10px;"></td>
    Why this is important, if I may ask?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So is this the smartest way to do it?

    HTML Code:
    <table border="1">
    <tr>
    <td colspan="3">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
    </tr>
    <tr>
    <td width="50%">
    cell1</td>
    <td width="10"><TABLE width="10"></TABLE></td>
    <td width="50%">
    cell2</td>
    </tr>
    </table>

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by melissapbr View Post
    It's never going to work unless you set a width on the table itself. If your numbers are not adding up to a particular table width, IE will surely ignore all your efforts. Somebody please prove me wrong!
    I can't prove you wrong, so I guess you are right. Good idea actually to set a table width...

  7. #7
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    An empty <TABLE> is not valid HTML, and even in the arcane days before CSS, people had better ways of forcing a space between table columns, like a 10 pixel wide clear image.

    Let me make this suggestion instead, though:
    HTML Code:
    <table border="1">
    <tr>
    <td colspan="2">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</td>
    </tr>
    <tr>
    <td width="50&#37;" style="padding-right: 10px">
    cell1</td>
    <td width="50%">
    cell2</td>
    </tr>
    </table>

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    style="padding-right: 10px"

    That is a good idea


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
  •