Welcome to WebmasterWorld Guest from 54.196.232.162

Forum Moderators: not2easy

Message Too Old, No Replies

Multiple TDs in a TR, but on separate lines?

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

New User

joined:July 13, 2011
posts: 3
votes: 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. :/

THANKS!

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

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

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


What about hiding all TDs (display:none) but showing just the td:first-child {display:table-cell;} ?
6:15 pm on July 13, 2011 (gmt 0)

New User

joined:July 13, 2011
posts: 3
votes: 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 July 13, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 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 July 13, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10


[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.
8:22 pm on July 13, 2011 (gmt 0)

New User

joined:July 13, 2011
posts: 3
votes: 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 July 13, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 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 July 13, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2002
posts:18903
votes: 0


I was wondering if
display:block
might have any bearing in this.
10:09 pm on July 13, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 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 July 13, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12709
votes: 244


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members