1

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.

cgillis
  • 13
  • 2
  • 2
    Tables are only bad when used for layout. If the data your are displaying is tabular, go ahead and use a table. The absolutist stance of "never use tables" is flat out wrong. – riwalk Aug 19 '11 at 15:20

3 Answers3

1

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/

helgatheviking
  • 25,596
  • 11
  • 95
  • 152
  • We have a winner. This is exactly what I was looking for. Note: needs cellspacing="10" as a table attribute in the HTML. cellspacing not a valid css property (according to my text editor at least) – cgillis Aug 19 '11 at 15:37
0

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/

Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
  • @cgillis: It does work. It's just that it needs a bigger `height` value: http://jsfiddle.net/p87Bv/8/ – Joseph Silber Aug 19 '11 at 15:25
  • And when a user inputs a comment that is 'too long'. This needs to work for all cases, I can't be setting a static height for my TD elements. They will change! – cgillis Aug 19 '11 at 15:27
  • Then you'll have to use Javascript/jQuery, or change your markup. – Joseph Silber Aug 19 '11 at 15:29
  • Basically, you'll have to stop using a table for markup, and switch to using `div`s. You'll then have to create 2 `div`s per item: one for the styling, and one for the content. This is a fairly complex solution, and cannot possibly fit into 1 comment here. Read about it here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks . However, for simplicity's sake, I'd use javascript/jQuery... – Joseph Silber Aug 19 '11 at 15:39
0

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 */
dwmcc
  • 1,034
  • 8
  • 19