CSS <div> tables not taking height attributes

This site is best viewed in a modern browser with JavaScript enabled.

CSS <div> tables not taking height attributes

chestertb

Hi All,

I have a <div> based table in CSS nested inside another <div> table.

I can't seem to set the overflow:hidden attribute if there's a line of text in the cell. I know... you're asking "why would you want to?". It would take too long to explain, and it would also take too long to explain why I'm using in-line css. Suffice to say that in the former I want to, and the latter, because the page is generated dynamically, I need to.

The point is, it doesn't matter how high I set the div, it will revert to the height of the line of text.

I tried using

<div style='display:table; table-layout:fixed; width:100%'>
  <div style='display:table-row'>
    <div style='display:table-cell; height:2px'>
      Some text
    </div>
  </div>
</div>

Of course, that doesn't even have the nested table and it still doesn't work.

Can anyone tell me where I'm going wrong?

Thanks
CTB

rtrethewey

I haven't used CSS tables and I've only browsed the W3C specs, but I suspect you're running into the way cell heights are calculated. I'm not certain, but I don't think you can set a limit directly because tables generally expand vertically to accommodate the content within the width of a cell. See: http://www.w3.org/TR/CSS21/tables.html

You might be able to add another containing <div> to surround those shown in your example and set it's height and overflow properties. It's difficult to suggest a useful solution when you don't explain why you are using this elaborate mark-up to hold a single <div>/cell that you indicate may or may not have any content.

chestertb

Thanks. Yes, I'm thinking it might have something to do with cells in tables needing to accommodate whatever is in them.

As for the elaborate markup, it's because I'm trying to give my old, tired content manager a more flexible design interface.

In the new design, you can have up to nine rows of elements, and within each row, you can have up to nine columns. Each column is its own table... There need be no correlation between column widths from one row to the next.

And to deliver one last layer of flexibility, each cell can be divided into three. Designing the page is then a simple process of telling the CMS what data or sets of data you want where.

I tried using floating divs, but you can't apply a height to an in-line element so that didn't work. And because you can't apply a height, you can't control the verticle alignment of the content (which you can do in a div table. I also considered just allowing the user to place div containers wherever they liked, but decided that wouldn't work with dynamically generated content.

Thanks again. If you have any more thoughts or suggestions, please let me know

CTB