CODEWITHSUNDEEP
htmlcss
Air In
Air In

Reputation: 975

Expand one table-cell only

I have two table cells, with dynamic content.

Table cell one works fine, when new content is added to it making it bigger than table cell 2, table cell 2's height fits table cell 1's and all is well in the universe.

But when new content is added to table cell 2 (which has overflow hidden, and works fine with display: block) it expands, the overflow never happens, and table cell 1's height now matches table cell 2.

What I want is when more content is added to table cell 2, it will show content up to table cell 1, then the rest is hidden. I understand I can do it in javascript, any idea how to do it without it?

Here's a JSFiddle: http://jsfiddle.net/dYsNx/

Col 2 should only go up to col1's height in content, rest should be overflow hidden

Upvotes: 2

Views: 1374

Answers (2)

Edditoria
Edditoria

Reputation: 199

overflow: hidden should not be used in that way. But, you get the concept.

Others, I saw your code is not very clean and keeping in standard. So, I would modify it in my way (hope it is better)

Please see the following link: http://jsfiddle.net/Edditoria/TGfzA/

As you see, overflow: hidden; is in #box, then set position: relative; without top/left setting.

To avoid display:table compatibility issue of IE<7, please just keep the default div display setting in CSS. I would use % rather than fixed px width to avoid IE's display issues too!

Assuming col1 is the base of dynamic height, there's nothing to do.

In col2 (and all other columns), you will need to add position: absolute; top: 0px; left: 50%;.

I change the col-x from ID to class, since you may need to add more columns later.

  • update: base on your comment, added scrolling instead of hide extra information.

Upvotes: 1

d.k
d.k

Reputation: 4456

It's impossible by means of pure CSS. This is from CSS 2.1 spec ( http://www.w3.org/TR/CSS2/tables.html#height-layout ):

In CSS 2.1, the height of a cell box is the minimum height required by the content.

The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells.

Upvotes: 0

Related Questions