Solved

Appending content to a cell in a table with jQuery

Posted on 2013-06-02
1
312 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 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

756 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