-1

I should preface this by saying I have already tried several fixes found on this site for similar questions (such as Set the table column width constant regardless of the amount of text in its cells?) to no avail.

I am generating tables of user comments (1 comment per table) via AJAX. In brief, input of text and click of a button calls an AJAX function which accesses a php file; the php file then displays the user comments chronologically based on an algorithm I have developed. Works fine...(the most up to date relevant code follows)

$current.="<table border=\"1\" width=\"550px\" table-layout=\"fixed\">";
$current.="<tr width=\"550px\">";
$current.="<td width=\"60px\"><img src=\"" . $Picture1 . "\" style=\"float:left\"    
width=\"50px\" style=\"border: 0\" height=\"55px\"></td>";
$current.="<td width=\"485px\">";
$current.="<div style=\"width:485px\"><font size = \"2\" style=\"font-   
family:arial\">&nbsp;&nbsp;&nbsp<b>$user1</b></font>&nbsp;&nbsp;&nbsp";
$current.="<font size = \"2\" style=\"font-family:arial\">$usercomment1</font>";
$current.="</div></td>";
$current.="</tr>";
$current.="</table>";

EXCEPT when the user comment exceeds the horizontal bounds (width) of the table (about 60 characters). Note that without the div in the table cell as shown above (and setting EVERY td, tr, and table element to a fixed width), the comment expands the bounds of the table to the right (revealed by showing the border). Amazingly, with the code above (that is, with the div included), the text of the user comment actually goes outside of the table (text actually simply writes over the right table border like it wasn't even there and keeps moving right, as if the div/text has a higher z-index).

Right now, my quick and dirty fix is to set maxlength='60' for the input text field of the form which generates the user comment, but I don't like this method, as limiting characters to 60 is like Twitter-lite. Any ideas on why my table issue is occurring?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
The One and Only ChemistryBlob
  • 7,864
  • 10
  • 36
  • 69
  • 1
    I would highly recommend re-factoring this to utilize a list rather than a table. Tables are meant, as far as semantics go, for data - not layout. Additionally, please never ever ever ever use the `` tag. – SamT Sep 25 '13 at 16:50
  • 1
    I strongly suggest replacing the PHP code with the generated HTML and then getting rid of the PHP tag since this issue is 100% unrelated to anything involving PHP. – Sammitch Sep 25 '13 at 16:53
  • Thanks for the suggestion @davidkonrad but still the user comment is winning! I tried your suggestion both in the CSS and inline stying but the comment keeps expanding beyond the set borders. I will try setting an automatic line break after 60 displayed characters and see if this could work. – The One and Only ChemistryBlob Sep 25 '13 at 17:19
  • Thanks @SamT.....I will give this a shot with a list and see how it goes. – The One and Only ChemistryBlob Sep 25 '13 at 17:23

2 Answers2

0

try Using elipsis for the text 

.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}

it will help the text not to over flow else try using overflow property

Pratim
  • 75
  • 1
  • 10
0

With more testing, I was able to auto insert line breaks in the way I needed using the wordwrap() function:

http://www.php.net/manual/en/function.wordwrap.php

Worked like a charm

The One and Only ChemistryBlob
  • 7,864
  • 10
  • 36
  • 69