Solved

Hidden "overflow" in a table td? (urgent)

Posted on 2003-12-12
3
495 Views
Last Modified: 2010-04-09
Hi!

I have a table with two cells containing all sorts of data.
The left one has a variable content regarding height, the right one never changes.

What I want to do is to have the entire table to only use the height required by the left (variable) td. I then want the contents in the right column to "dissapear" where it runs out of pixles.

If you need a better explanation, please tell me.

Best regards,
David
0
Comment
Question by:larsan
  • 2
3 Comments
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Here's one way to handle this:
(Just make sure that the height spec'd in the table is "less" than the actual height of the left cell)

<table border="0" cellpadding="0" cellspacing="0" width="600">
  <tr>
    <td valign="top" height="100" width="300">123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123</td>
    <td valign="top" height="100" width="300">
    <div style="overflow:hidden; height:100%;">
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123</td>
  </tr>
</table>
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
Comment Utility
Sorry - forgot the closing </div> tag...

<table border="0" cellpadding="0" cellspacing="0" width="600">
  <tr>
    <td valign="top" height="100" width="300">123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123</td>
    <td valign="top" height="100" width="300">
    <div style="overflow:hidden; height:100%;">
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123</div></td>
  </tr>
</table>
0
 
LVL 33

Expert Comment

by:snoyes_jw
Comment Utility
Here's another way, which is more complicated than georgemarian's answer and requires the user to have javascript enabled and is probably browser dependent.  The only redeeming feature of my version is that you don't have to lie about td height.

<head>
<style>
.right  { overflow: hidden;}
</style>
<script language="javascript">
function doIt()
{
      var myHeight = document.getElementById("left").offsetHeight;
      document.getElementById("right").style.height = myHeight;
      document.getElementById("right").innerHTML = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. "
}
</script>
</head>
<body onload="doIt()">
<table id="myTable">
<tr>
      <td width="50%"><div class="left" id="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div></td>
      <td width="50%"><div class="right" id="right"></div></td>
</tr>
</table>
</body>
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

771 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

8 Experts available now in Live!

Get 1:1 Help Now