Log in

View Full Version : Table stretching problem


codeexploiter
11-01-2007, 08:49 AM
Hi all,

Have a look at the following source



<table width="100%" border="2px" cellpadding="0" cellspacing="0" >
<tr>
<td width="12%" style="padding-left:2px;padding-right:2px;background-color:lightgray;" colspan="1">ID</td>
<td width="38%" style="padding-left:2px;padding-right:2px;background-color:lightgray;" colspan="1">Summary </td>
<td width="9%" style="padding-left:2px;padding-right:2px;background-color:lightgray;" colspan="1">Opened </td>
<td width="0%" style="padding-left:2px;padding-right:2px;background-color:lightgray;" colspan="1">Closed </td>
<td width="8%" style="padding-left:2px;padding-right:2px;background-color:lightgray;" colspan="1">Status &nbsp; </td>
<td width="12%" style="padding-left:2px;padding-right:2px;background-color:lightgray;" colspan="1">Priority &nbsp; </td>
<td width="12%" style="padding-left:2px;padding-right:2px;background-color:lightgray;" colspan="1">Assigned To </td>
<td width="0%" style="padding-left:2px;padding-right:2px;background-color:lightgray;" colspan="1">Submitted By</td>
<td width="9%" style="padding-left:2px;padding-right:2px;background-color:lightgray;" colspan="1">Time</td>
</tr>
<tr>
<td>Test - 1</td>
<td>Test - 2</td>
<td>Test - 3</td>
<td>Test - 4</td>
<td>Test - 5</td>
<td>Test - 6</td>
<td>Test - 7</td>
<td>Test - 8</td>
<td>Test - 9</td>
</tr>
<tr>
<td>Test - 11</td>
<td>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppqqqqqqqq qqqq</td>
<td>Test - 13</td>
<td>Test - 14</td>
<td>Test - 15</td>
<td>Test - 16</td>
<td>Test - 17</td>
<td>Test - 18</td>
<td>Test - 19</td>
</tr>
</table>


The problem here is the second rows second cell content break the whole table layout. It stretches the table until the content fits in the cells.

I am looking for a method where the cell content will be broken in such a way that it fits within the logical/specified width of the table.

Thanks in advance
jscheuer1
11-01-2007, 09:48 AM
Well, you cannot fit a size 13 foot into a size 8 shoe. If you had some white space in there, like with normal words, it could wrap. There are some tricks that can be used to get the browser to wrap it even without white space, but these vary by browser and can be impractical. See:

http://www.dynamicdrive.com/forums/showthread.php?t=3186
coothead
11-01-2007, 11:04 AM
Hi there codeexploiter,

here is a solution, using a div, that will work in Firefox and Opera perfectly.
IE, of course, being IE, refuses to play.
So it needs to have a compromising set of dimensions...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table {
width:100%;
}
.gray {
padding-left:2px;
padding-right:2px;
background-color:#d3d3d3;
}
#scroll {
width:100%;
height:100%;
overflow:auto;
}
#td1,#td5,#td6 {
width:12%;
}
#td2 {
width:38%;
}
#td3,#td9 {
width:9%;
}
#td4,#td8 {
width:0%;
}
#td7 {
width:12%;
}
</style>

<!--[if IE]>
<style type="text/css">
#scroll {
width:304px; /* IE will not accept width 100% */
height:38px; /* IE will not accept height 100% */
}
</style>
<![endif]-->

</head>
<body>

<table border="2" cellpadding="0" cellspacing="0" >
<tr>
<td id="td1" class="gray" colspan="1">ID</td>
<td id="td2" class="gray" colspan="1">Summary </td>
<td id="td3" class="gray" colspan="1">Opened </td>
<td id="td4" class="gray" colspan="1">Closed </td>
<td id="td5" class="gray" colspan="1">Status &nbsp; </td>
<td id="td6" class="gray" colspan="1">Priority &nbsp; </td>
<td id="td7" class="gray" colspan="1">Assigned To </td>
<td id="td8" class="gray" colspan="1">Submitted By</td>
<td id="td9" class="gray" colspan="1">Time</td>
</tr>
<tr>
<td>Test - 1</td>
<td>Test - 2</td>
<td>Test - 3</td>
<td>Test - 4</td>
<td>Test - 5</td>
<td>Test - 6</td>
<td>Test - 7</td>
<td>Test - 8</td>
<td>Test - 9</td>
</tr>
<tr>
<td>Test - 11</td>
<td>
<div id="scroll">
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppqqqqqqqq qqqq
</div>
</td>
<td>Test - 13</td>
<td>Test - 14</td>
<td>Test - 15</td>
<td>Test - 16</td>
<td>Test - 17</td>
<td>Test - 18</td>
<td>Test - 19</td>
</tr>
</table>

</body>
</html>
coothead