CSS Grid / Table Question

I have 开发者_开发知识库a table that I'm styling with CSS. Yes I know, tables are bad and all that. I want the "grid" of TD's to all have the height of the row they are positioned in.

http://jsfiddle.net/p87Bv/1/

You'll see if they have varying content, they look all jumbled up! Would prefer not to use Javascript.

tables are not automatically bad. tables are perfect for displaying tabular data... even though that doesn't seem to be what you are doing.

move the style from the div to the table cell...check out my updated fiddle for some CSS changes. i think you could remove the divs from the markup now that they aren't being used for anything via CSS

http://jsfiddle.net/p87Bv/5/

All you have to do is give you tds a height, and then give the divs inside a height: 100%.

Here's the fiddle: http://jsfiddle.net/p87Bv/2/

It's hard to understand your question. Maybe you can clarify - is this what you're looking for? Also notice how the overflowing text is in a scrollable div - more on that later.

Link: http://jsfiddle.net/ZFHUm/

If it is, it's as simple as adding the height CSS property. Also, it's always good to address the text overflow, especially in this manner, in case the text inside the table row (div) is larger than the div itself. Add these to the 'table td div' property to achieve the affect in the new fiddle:

height:200px;
/* or whatever height you'd like them to be */
overflow:auto;
/* makes all overflowing text have a scrollbar */