Appending content to a cell in a table with jQuery

I am appending content to a cell in a table with jQuery. The problem is that I am not controlling how many lines of text get in there, so the cell might stretch and thus stretch the row and the neighboring cells. I tried to add: "overflow:auto;" to the style attribute of the table cell, but that didn't help. Is there a way to add to the cell and make the content of it scrollable if the content would otherwise overflow? Or will I have to calculate how many lines go in there and append only that?

Using HTML5.
LVL 2
itniflAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
You can get more complex but here is a simple way using css and converting the td to a block and making it scroll http://jsbin.com/opezot/1/edit  Here I use hight but you can also use max-height too.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.fifty{height:50px; overflow:scroll}
  td{ background-color:#FFCC66;padding:10px;}
</style>
</head>

  <body><table width="400">
  <tr>
    <td>one.one</td>
    <td>one.two</td>
    <td>one.three</td>
  </tr>
  <tr>
    <td>two.one</td>
    <td><div class="fifty">two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two two.two</div></td>
    <td>two.three</td>
  </tr>
  <tr>
    <td>three.one</td>
    <td>three.two</td>
    <td>three.three</td>
  </tr>
</table>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.