www.webdeveloper.com
Results 1 to 11 of 11

Thread: Stop Tables/Cells from Stretching

  1. #1
    Join Date
    Oct 2010
    Posts
    3

    Stop Tables/Cells from Stretching

    Is there a way to restrict the size of a table and make it non-negotiable? I keep running into a problem with the width of the table stretching. I've tried setting the tables width, per cell, and tried using the max-width style.

    I am in development of my work's website and during the process I have been checking its layout in 4 different browsers (Firefox, Chrome, Opera and IE) and at first I was only having problems on occasion with IE. Now depending on the computer I am having problems with tables stretching in Firefox too (The content section is fine here at work but on my laptop at home the table stretches).

    [URL="http://metagraphics.net/home.html"] Metagraphics URL]

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Place the cells contents in a div with a defined width.

    Tables are for data, not layout.

  3. #3
    Join Date
    Mar 2010
    Location
    Singapore
    Posts
    367
    Tables are for data, not layout.
    Actually I feel the above statement is not really true. There are a group of ppl who says all positioning is CSS. But there will also be another group of ppl who prefer to play around with table tags and attributes to achieve the layout.

    Who is right or wrong is pretty much subjective IMHO.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Who is right or wrong is pretty much subjective
    No, objective: http://www.hotdesign.com/seybold/

  5. #5
    Join Date
    Oct 2010
    Posts
    3
    WOW, what an eye opener for me! I took a web design class in community college about 10 years ago to get me by and I hadn't done much with it; just personal sites for my art (and my boss only has Dreamweaver MX to boot)... When I took the class CSS was more of a side note than a building tool! I've heard that CSS was so cool but all I heard in my head was "blah blah, CSS rocks for changing the color of my header text, and look what I can do with my links." I hadn't realized how dynamic this could be... and now with animation properties of CSS3!


    Now that the door is open I want more! I've been looking around the web a bit and been checking out peoples source and CSS but can't figure out how the designers are assigning div location of buttons/rollovers/images since I'm not seeing height properties. Are they using image spacers (A no no per seybold)?


    Thank you for your help Fang. I loved the comic strips too. It looks like its time for an update on the website!

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    but can't figure out how the designers are assigning div location of buttons/rollovers/images since I'm not seeing height properties
    Can you give an example?

  7. #7
    Join Date
    Oct 2010
    Posts
    3
    I stand corrected. As I am looking further into it I am seeing the height properties are located under the CSS... I was looking for it with the div tags. So, if I'm understanding this correctly I'd want to use a wrapper for the over all size, then separate bulk areas and then break up tabs or whatever within bulk areas.

    Why can't tables be locked? Is it browser compatibility?

  8. #8
    Join Date
    Jan 2011
    Posts
    135

    help

    so i put the div on my table and it stopped the table from expanding but the type that is echo into the table is still running out of the table please help here is my code.
    HTML Code:
    <td width="50%" colspan="2" style="border: .05em solid #000"><p><span style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #000; width:100px" class="table"><div style="width:260px">[PHP]<?php echo $_SESSION['comments'];?>[/PHP]</div></span></p>
      <p>&nbsp;</p></td>

  9. #9
    Join Date
    Aug 2009
    Posts
    593
    I rarely use tables for anything these days, but this is what I used to do in the past...

    HTML Code:
    <table style="table-layout: fixed; width: 700px;" border="1" cellspacing="0" cellpadding="0">
    <col width="160" /><col /><col width="120" />
    	<tr>
    		<td>Menus Menus Menus Menus Menus Menus Menus Menus Menus Menus Menus Menus Menus Menus</td>
    		<td>Content</td>
    		<td>Advertising Advertising Advertising Advertising Advertising Advertising Advertising Advertising Advertising</td>
    	</tr>
    </table>
    Using table-layout: fixed in the <table> tag, the table will equally divide its width between the columns, but then specifying <col> tags and widths within them you can control the exact sizes you want. You will notice I didn't specify a width for one of the <col> tags, that tag will get the remaining width after the other two columns are sized, this is useful if you have a table layout that stretches the full length of the screen.

    Note: This only works for widths, the height is determined by the content of the cells.

  10. #10
    Join Date
    Jan 2011
    Posts
    135

    hey

    the table isnt expanding any I was able to get that to stop, however the type that is in the echo session that I have within the table, its text is not wraping so its going outside the table instead of staying in it.

  11. #11
    Join Date
    Dec 2010
    Posts
    36
    I usually use a height and width attribute in my <td> tags when doing email ads. That keeps it from stretching when you look at it in Liveview, although Dreamweaver CS5 will still display things weird sometimes when you're looking at it in normal.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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