By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,446 Members | 1,185 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,446 IT Pros & Developers. It's quick & easy.

Help needed in adjusting the colum width of table

P: 28
Hi List,
I am having two table one after the another.Even after setting the column width of both the tables the column takes the width of the data in that column.
Ideally I want both the table's column width to be same so that one cannot see that it's actually two tables.

<table border="1" cellspacing="3" cellpadding="5">
<tr>
<td align="center" width="10">Text1</td>
<td align="center" width="10">Text2</td>
<td align="center" width="10">Text3</td>
<td align="center" width="10">Text4</td>
</tr>
</table>
<table border="1" cellspacing="3" cellpadding="5">
<tr>
<td align="center" width="10">Text5</td>
<td align="center" width="10">Text6</td>
<td align="center" width="10">Text7</td>
<td align="center" width="10">Text8</td>
</tr>
</table>


It looks foolish but that's the way I want it :-)
The above stuff is not working.
Why is that the column is taking the width of the data contained in it?

Thanks in advance,
Hussain.
Jan 30 '07 #1
Share this Question
Share on Google+
8 Replies


Expert 100+
P: 1,892
Hi Hussain welcome to The Scripts Developer Network (TSDN) try this out, please let us know if you have trouble, don't understand, or have other questions:
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">


</style>
</head>

<body>
<table border="1" cellspacing="3" cellpadding="5">
<tr>
<td align="center" style="width: 150px">Text1</td>
<td align="center" style="width: 150px">Text2</td>
<td align="center" style="width: 150px">Text3</td>
<td align="center" style="width: 150px">Text4</td>
</tr>
</table>
<table border="1" cellspacing="3" cellpadding="5">
<tr>
<td align="center" style="width: 150px">Text5</td>
<td align="center" style="width: 150px">Text6</td>
<td align="center" style="width: 150px">Text7</td>
<td align="center" style="width: 150px">Text8</td>
</tr>
</table>

</body>
</html>
[/html]
Jan 30 '07 #2

P: 28
Hi AricC,
When I increase the length of the text then it doesn't fit into that width rather it extends the width untill it fits into it.I tried using "WORD-WRAP :break-word" still it didn't worked out.
Sample Example:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
</style>
</head>
<body>
<table border="1" cellspacing="3" cellpadding="5">
<tr>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Textqqqqqqqqqqqqqqqqqqqqqqqqqqq</td>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Text2</td>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Text3</td>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Text4</td>
</tr> </table>

<table border="1" cellspacing="3" cellpadding="5">
<tr>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Text5</td>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Text6</td>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Text7</td>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Text8</td>
</tr>

</table>
</body>
</html>


Thanks in advance,
Hussain.
Jan 31 '07 #3

Expert 100+
P: 1,892
Hi AricC,
When I increase the length of the text then it doesn't fit into that width rather it extends the width untill it fits into it.I tried using "WORD-WRAP :break-word" still it didn't worked out.
Sample Example:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
</style>
</head>
<body>
<table border="1" cellspacing="3" cellpadding="5">
<tr>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Textqqqqqqqqqqqqqqqqqqqqqqqqqqq</td>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Text2</td>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Text3</td>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Text4</td>
</tr> </table>

<table border="1" cellspacing="3" cellpadding="5">
<tr>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Text5</td>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Text6</td>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Text7</td>
<td align="center" style="width: 150px; WORD-WRAP :break-word" >Text8</td>
</tr>

</table>
</body>
</html>


Thanks in advance,
Hussain.
Are you trying to get the text to stay on 1 line? Try nowrap
Jan 31 '07 #4

P: 28
I want the text to be adjusted inside the 150px width(i.e now the long text will appear in two lines), but somehow it is extending that specified width by 5 pixels.
That means the two rows of the first column are not perfectly aligned.

Hussain.
Jan 31 '07 #5

Expert 100+
P: 1,892
Use overflow: auto see if that helps. Also, I may be missing what you are trying to do if that doesn't do it give us an example please.

HTH,
Aric
Jan 31 '07 #6

P: 28
My point is that the two table(i.e their columns and rows) should be perfectly aligned with each other irrespective of the length of the text contained in the cell of each row/column.
But now what's happening is that when the length of the text is greater than 150px it wraps to the next line(that's fine), but now this cell extends it's width little more than 150px due to which it is now NOT aligned with the cell just below it which is 150px in length.

In simple words, both the tables first column are not aligned.
Tried "overflow :auto" but didn't help :-(

hussain.
Feb 1 '07 #7

100+
P: 200
My point is that the two table(i.e their columns and rows) should be perfectly aligned with each other irrespective of the length of the text contained in the cell of each row/column.
But now what's happening is that when the length of the text is greater than 150px it wraps to the next line(that's fine), but now this cell extends it's width little more than 150px due to which it is now NOT aligned with the cell just below it which is 150px in length.

In simple words, both the tables first column are not aligned.
Tried "overflow :auto" but didn't help :-(

hussain.
Hi, Did you manage to get a solution as I'm sitting with the same problem.
Any Ideas?
Apr 19 '07 #8

P: 2
This should do the trick for you:

[HTML]
<table size='150' border='1' cellpadding='0' cellspacing='0'>
<tr>
<td width='50'>Cell One</td>
<td width='50'>Cell Two</td>
<td width='50'>
<div style='overflow:hidden'>
VerryLongTextCellThatShouldWrapButWillNotLongLongL ongLongLong
</div>
</td>
</tr>
</table>
[/HTML]

This will clip the text so that it doesn't show. If you want to be able to have a scrollbar in the cell so that the user can scroll and see the entire text, change 'hidden' to 'auto'.

Note: When I test this, it works in FireFox but not in IE. I'm not sure why. Maybe because IE sucks. ;-)
Apr 20 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.