Solved

cells going beyond specified table width

Posted on 2004-10-28
387 Views
Last Modified: 2006-11-17
I have always been able to control the width of tables, but the content inside is expanding the cell beyond the specifed width - how do  i prevent this
0
Question by:sahrom
    9 Comments
     
    LVL 13

    Expert Comment

    by:cLFlaVA

    How are you currently 'controlling' the width of the cells?  Are you controlling the width of the cells?

    You may need to a) set the width of the cells explicitly, or b) use overflow: hidden or overflow: auto or overflow: scroll to prevent this.
    0
     

    Author Comment

    by:sahrom
    i have a div

    #layoutTable {
          width: 780px;
        border-spacing: 0px;  
          font-size: 10pt;
          padding:0px;
    }
    that is a overall div - after the body and closes just below body

    then I have a td where I was specifing it with css - then tried using html

    and then one table within the td where I first specified the width with css

    so it seems I tried - a) set the width of the cells explicitly

    so then I should try b - if I am also using css to specify the width

    thanks for your reply
    0
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    Why not get rid of the tables and just use divs?
    0
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    Post your code please.  Just setting widths is not going to control it.  Some browser like Mozilla will ernder outside the box if you do not give them coding that allows them to d something else.

    Cd&
    0
     
    LVL 11

    Expert Comment

    by:neester
    To control a table.
    You need to control the cells as well...

    First of all in css you should have this:

    table
    {
    width: MAXWIDTHHERE;
    }

    then you need to either set PIXEL width for the cells that add up to the maxwidth... OR give them percentage values...
    0
     

    Author Comment

    by:sahrom
    I will try posting my code because I have tried using just css to define the widths as well as html, neither were working

    -----------html ----------------------
    <!doctype HTML public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <title>Web EXPRES</title>
    <LINK rel="stylesheet" type="text/css" href="content.css">
    </head>
    <body bgcolor="#ffffff">
    <div id="layoutTable">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="logosmall" rowspan="5"><img src="Logo.jpg" alt="PSP logo" width="207" height="148"></td>
       </tr>
      <tr>
        <td class="welcome" colspan="9">Welcome</td>
      </tr>
    </table>
    <table border="0" cellspacing="0" cellpadding="0">
    <!-- begin left nav -->
      <tr>
        <td rowspan="2" class="navBG" background="logo2.gif">
          <table width="207" border="0" cellspacing="0" cellpadding="0">
    </table>
    <!-- end left nav -->
        <td class="medgreycontent">      
               <form name="booking" id="booking" method="post" onsubmit="booking.asp">
     <table class="maincontent" border="0" cellspacing="1" cellpadding="0" ID="Table2">
       <tr>
          <td class="bgltgrey width570 bold" colspan="3">width="573"width="573width="573"width="573""width="573"width="573"width=""width="573"width="573king</td>
        </tr>
          <tr>
                <td class="white" width="60%">width="573"width="573width="573"wer:</td>
                <td class="bgcream"><input type="Text" Name="Number" Size="9" Maxlength="9" id="Number"></td>
          </tr><!-- Submit Button -->      
       </table></form>
          </td>
      </tr>
    </table>
    </div>
    </body>
    </html>
    ---------------------------- css ------------------
    i tried
    #layoutTable {
          width: 780px;
        border-spacing: 0px;
        border-collapse: collapse;
          font-size: 10pt;
          padding:0px;
    }
    td.medgreycontent   {
          background-color : #E7E7E7;
          width: 570px ;       
          padding: 13px 9px 9px 13px;
          margin: 2px 2px 2px 2px;
           border-left:       1px solid #666666;
    }
    table.maincontent {
          background:       #E7E7E7;
          width: 570px ;
    }

    td.width570   { width: 570px; }
    0
     
    LVL 53

    Accepted Solution

    by:
    If you do not want the cells to change sizes the table must include this style attribute

    table-layout:fixed;

    Every cell must have a width specified CSS.  
    Every table must have a width specifed in CSS.
    Any cell that can overflow must have these CSS properties:

    overflow:hidden; clip:auto;

    Nest table may still break it.

    If you continue to use tables for layout management you are going to spend a lorge part of your time
    fixing broken pages.  Tables are not intended to be used  to manage layout. That is what CSS is for.

    In the last century a lack of browser support for CSS  forced us to hack layouts with tables and frames
    that is no longer necessary.  However if you like doing three times as much work for half the result  then
    I guess using tables for layout is okay.

    Cd&
    0
     

    Author Comment

    by:sahrom
    thanks, actually it is not that simple the tables were created before I came along a reduced the amount of table but since asp db code already exists it is harder to remove all tables
    0
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    I understand the problem of haveing to work with code that is already there.  Unfortunately it takes time
    to change things.  I wish I could come up with a program that would just take all the old code and
    modernize it automatically; but in the meantime, like you, I have to work throught the old stuff, and try
    do the new stuff too.  Thanks for the A. :^)

    Cd&
    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

    Most web designers often experience crossbrowser issues during interface design / development.  On common problem is with Internet Explorer due to its rendering discrepancies between previous versions.  Here are some techniques I use to help avoid c…
    Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    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

    12 Experts available now in Live!

    Get 1:1 Help Now