Solved

Appending content to a cell in a table with jQuery

Posted on 2013-06-02
1
310 Views
Last Modified: 2013-06-02
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.
0
Comment
Question by:itnifl
1 Comment
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39214872
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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now