Table stretching problem

**codeexploiter** · 11-01-2007, 08:49 AM

Hi all,

Have a look at the following source

Code:

<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>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppqqqqqqqqqqqq</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/s...ead.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...

Code:

<!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">
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppqqqqqqqqqqqq
</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

Thread: Table stretching problem

Thread Tools

Search Thread

Table stretching problem

Bookmarks

Bookmarks

Posting Permissions