Solved

Appending content to a cell in a table with jQuery

Posted on 2013-06-02
1
313 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 53

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

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

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

Suggested Solutions

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 tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

710 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