HTML table column width problem

Question

<table width="825" border="0" cellspacing="1" class="tableLines1" cellpadding="0">
   <tr>     
       <td align="left" valign="middle">Account / BIC</td>
       <td align="left" valign="middle">Name</td>
       <td align="left" valign="middle">Email Address</td
   </tr>
   <tr> 
       <td ><%=Data.getAccount())%></td>
       <td ><%=Data.getName())%></td>
       <td width="250px"><%=Data.getEmailAddress())%></td>
   </tr>
</table>

I have the following table. This data object get populated from database. The problem is when email address gets bigger the width of table also increases. For example

emailAddress = [email protected], [email protected], [email protected]

then html intelligently breaks it from spaces and make three two rows like this.

[email protected], [email protected], 
[email protected]

but what i want is that if emailAddress size increases a certain value table size i.e column width should remain constant.

[email protected], [email protected], 
[email protected]
ddddddddddd

To be more specific i want the data to be displayed as shown above!

Can anyone please guide me. Thanks !

Edited : I want html to intelligently decide the column widths itself. Just not itself increase the table width from the specified value !

Simone · Accepted Answer · 2011-09-14 06:54:07Z

2

Use this CSS rule: word-wrap: break-word;

break-word means the text will wrap to next line.

word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.

answered Sep 14, 2011 at 6:54

Simone

21.6k15 gold badges84 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Simone Over a year ago

You need to set a fixed width to cells in order to get working this property

HashimR Over a year ago

hmmmm. but i want html to intelligently decide the column widths itself. Just not increase the table width from the specified value !

Simone Over a year ago

In this way you just can't use word-wrap to solve your problem.

HashimR Over a year ago

i applied it to both <td>'s i.e the heading and the data <td>'s. still not working ! :(

HashimR Over a year ago

need to set width of all cells ? or just the email cell?

|

alistair · Accepted Answer · 2011-09-14 06:56:09Z

1

you can try wrapping your email address in a div with overflow set to hidden or scroll

<td width="250px"><div style="overflow:hidden; width:100%"><%=Data.getEmailAddress())%></div></td>

answered Sep 14, 2011 at 6:56

alistair

1,0749 silver badges10 bronze badges

Collectives™ on Stack Overflow

HTML table column width problem

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related