What about hiding all TDs (display:none) but showing just the td:first-child {display:table-cell;} ?

Interesting notion, but wouldn't that only show every fourth TD (or entry in this case)? I definitely need all the table cells to show, just not on the same line.

Unless you're suggesting I hide the TD but show the DIV within the TD...can that be done?

Ah yes, sorry, misread your post slightly there! That would display just the first TD of each row, filling the row, and hide the others.

The other thought then is to simply display the table-cell's as blocks...

td {display: block;}

While this works OK in Chrome, Safari, Opera and Firefox, IE8 is again the problem! IE8 displays all cells in a row.

[w3.org...]

User agents may ignore these 'display' property values for HTML table elements, since HTML tables may be rendered using other algorithms intended for backwards compatible rendering. However, this is not meant to discourage the use of 'display: table' on other, non-table elements in HTML.

Based on that, I think you are going to have a very difficult time finding a CSS only solution to this problem. This is one of the reasons why people argue against table based layouts... the position of elements can't reliably be changed via CSS alone.

Interesting, @penders. See, I actually already have the td display set to block, which allowed me to achieve the result in 4 of the 5 browsers. It is broken in IE8 and IE9. I wonder if declaring the table display as block would do anything, per this response: [sitepoint.com...]

Not sure, but I'm going to try.

@Fotiman: Thanks. I'm going to remain a little more hopeful than that for another hour or two, then I'll be in your camp, I'm sure. :D

I actually already have the td display set to block, which allowed me to achieve the result in 4 of the 5 browsers.

Yes, setting display:block on the TD is the trigger to display the TDs on separate rows in those 4 browsers. Setting the width alone has no effect in this case.

I wonder if declaring the table display as block would do anything...

As noted in that other thread, this changes the very nature of the table (it is no longer a table). This interferes with the 4 browsers that previously conformed well (they still display in rows but the rendering of the container is different across browsers). And this doesn't help IE. IF you were to change the table display, then it would perhaps be appropriate to change the other table elements as well?

I suppose JavaScript is out of the question?

@Fotiman: Thanks for the link to standards, good to know that IE isn't entirely broken in this respect.

I was wondering if

display:block

might have any bearing in this.

Hi Drokkon, and welcome to [webmasterworld.com]
Per fotiman's reference to the recommendations, ie8 and 9 are not broken.

I have a vague memory that ie treats table-cells as block by default, and/or making display read only, and/or I could be wrong, or that is older versions only. However, IMO declaring block is the least effective way to do this.

You don't want display:block because you don't want the table-cells, or any other table elements to display as block. What is desired is for each cell to display as if it was a row in the table. I'm an advocate of telling browsers exactly what you want them to do, and as would be expected setting td to display:table-row works on a quick test for ff4, Op11 and winSafari5.

Like PaulO'B who posted in the sitepoint thread, I ran a quick test of setting different table displays on the table, tr and td for ie, and haven't yet found a solution, however, td {width:100%;float:left;clear:left} achieves the desired table-cell layout for ie8. I would expect it to work for ie9 if display:table-row on the td doesn't (I can't test), and it can be sent via a conditional comment.

Different question: It generates 4 cells per row, but does it force you to fill all four cells? If only the first cell in each row-- including the headers, if any-- has content, the remaining three will automatically acquire a next-to-nothing width. (In fact, you have to take heroic measures to prevent them from collapsing to almost nothing!)