homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Multiple TDs in a TR, but on separate lines?

 4:46 pm on Jul 13, 2011 (gmt 0)

I can ONLY modify CSS, not HTML, on an app I'm using, and I've run into an interesting problem:
The app generates 4 cells per row, but I want only 1 cell per row. If I set the width of the TD to 90%, it seems to work, pushing each TD onto it's own "line."

It works, that is, in Chrome, Safari, Opera and Firefox browsers. IE seems to try to force the row/cell model. Is there any way I can accomplish this? It's tough to find an answer in a search engine. :/


[edited by: alt131 at 11:42 pm (utc) on Jul 13, 2011]
[edit reason] Thread Tidy [/edit]



 5:47 pm on Jul 13, 2011 (gmt 0)

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


 6:15 pm on Jul 13, 2011 (gmt 0)

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?


 7:49 pm on Jul 13, 2011 (gmt 0)

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.


 8:19 pm on Jul 13, 2011 (gmt 0)


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.


 8:22 pm on Jul 13, 2011 (gmt 0)

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


 9:20 pm on Jul 13, 2011 (gmt 0)

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.


 9:42 pm on Jul 13, 2011 (gmt 0)

I was wondering if
display:block might have any bearing in this.

 10:09 pm on Jul 13, 2011 (gmt 0)

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.


 10:31 pm on Jul 13, 2011 (gmt 0)

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!)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved