Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

cells going beyond specified table width

Posted on 2004-10-28
9
Medium Priority
?
401 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
Comment
Question by:sahrom
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 13

Expert Comment

by:cLFlaVA
ID: 12437545

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
ID: 12437683
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
ID: 12438141
Why not get rid of the tables and just use divs?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12438797
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
ID: 12439679
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
ID: 12443285
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:
COBOLdinosaur earned 2000 total points
ID: 12444518
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
ID: 12445512
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
ID: 12446975
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

610 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