Multiple TDs in a TR, but on separate lines?

HTML & CSS
1

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. :confused:

THANKS!

2

Well, the problem is back, and I’m wondering if I ever really fixed it in the first place.

Everything looks great here, because the system we’re using does this whole page in DIVs: Inspire Contest on Facebook | Facebook

IE8 still breaks this page, unfortunately, because it’s built with tables: Inspire Contest on Facebook | Facebook

Am I doing something wrong with the TD in question?

3

Hi,

Ie8 works as shown in this small demo:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
table{
	width:100%;
}
td{
	border:1px solid #000;
	background:red;
}
td{display:block;float:left;width:100%}
</style>
</head>

<body>
<table>
		<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
		</tr>
		<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
		</tr>
		<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
		</tr>
</table>
</body>
</html>

It seems that you are using the emulate ie7 meta tag which is why that page isn’t working in IE8 as the float method doesn;t work in IE7. Remove the emulate meta tag.


http://wildfireapp.com/fb/3139/contests/101081/voteable_entries/list?order=votes
Name	Content
Content-type	text/html; charset=utf-8
Content-language	en
Content-Style-Type	text/css
Content-Script-Type	text/javascript
[B]X-UA-Compatible	IE=EmulateIE7[/B]
4

By its very definition, TDs are all in the same line.

Since you want each TD to be in its own line, like a block element, you could display the whole table as a block… keep in mind that it would not act as a table anymore.

so doing something like .yourtable td { display: block}

if you can make it so that your data only goes to the first cell in a row ( then your it would look like each cell has its own line) and you could hide the other cells by using

.mytable td+td{display:none;}

Also note that that code targets ALL cells in the table, and ones in specific rows… for that you would need to be able to add a class to the TR tag.

5

That doesn’t seem to work in IE8 but something like this seems to change the cells into rows.


td {width:100%;float:left;clear:left}

Can’t see a solution yet for ie7 and under though.

(I thought td{display:table-row} might work for ie8 but it doesn’t)

6

I am surprised that any version of IE wouldn’t change the element to block. hmmm… I wonder if this is an issue with hasLayout.

7

The table and td elements are always in haslayout mode by default. I think it’s just IE not letting the display be changed.

8

Thanks for all the input. I think you all arrived at the same conclusion as these folks: Multiple TDs in a TR, but on separate lines? CSS forum at WebmasterWorld

I think it’s worth noting that I already had td set to block, which worked for 4 out of 5 browsers. IE8 and IE9 failed, and I’m sure IE7 would too.

Would it be worth setting display:block at the table level? I misread someone’s post and thought that was what they were suggesting and was hopeful, but now I doubt it would work anyway.

9

The code I gave you above works for IE8 (and probably Ie9). Just use float instead.


td {width:100%;float:left;clear:left}

Would it be worth setting display:block at the table level? I misread someone’s post and thought that was what they were suggesting and was hopeful, but now I doubt it would work anyway.

No we tried all variations of that and nothing works for ie7 and under I’m afraid.

10

Thanks…this DID work! I hope I’m not asking too much, but is it possible to set the td width to 90% and center them horizontally within the tr? I’m guessing not, since the tr doesn’t really know what it is anymore, but I was able to accomplish it with my first solution in all browsers but IE.

Inspire Contest on Facebook | Facebook

11

Did you try it? Quite a few of us are specification junkies, but when it comes to nut cracking time, the answer lies in doing it and looking for the reason it worked or not later.

Another thing to try is to center a block element within the td.

cheers,

gary

12

My maths isn’t great but if the width is 90% then a margin-left of 5% should center it :slight_smile: