3 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

I'm making a style sheet for an ebook and everything looks right, but I realized it only looks good in opera 6.

The first thing I want to do is stretch the table to fill the page:

table{width:100%}

That works, but I also want to set:

table{width:100%}
td{width:100%}

This makes everything distributed evenly, but when I open it in opera 7, mozilla, or IE5, the cells are all screwed up. The first TD is the widest and the others are squashed against the right of the screen. How do I get them to be equally distributed the way they are in opera 6 when I specify table,td{width:100%}?

Also, I'm trying to make horizontal lines across the rows:

----------- ----------- -----------
row
----------- ----------- -----------
row
----------- ----------- -----------
row
----------- ----------- -----------

and in mozilla vertical borders are created when I do TABLE {border-collapse:collapse;}

This is what it looks like in opera 5-6-7 and IE5
---------------------------------
row
---------------------------------
row
---------------------------------
row
---------------------------------

But this is how it looks in mozilla:

----------- ----------- -----------
row.......|row.......|
----------- ----------- -----------
row.......|row.......|
----------- ----------- -----------
row.......|row.......|
----------- ----------- -----------

Keep in mind that this is an e-book and I'm trying to add style, not recode the HTML.

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 6 years 22 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

OPERA table,td{width:100%} and border-collaps in MOZILLA

Perhaphs you should give us more working code to understand you properly. Or even a link would be fine. Cheers

http//melbourne.ug.php.net

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 14 hours 21 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

OPERA table,td{width:100%} and border-collaps in MOZILLA

Hi Matt5,
Possibly what you are after is table, table td{width:100%;}

Hope that helps.

Anonymous
Anonymous's picture
Guru

Try in Mozilla and opera5-6

<STYLE>
h2,h3{font-family:tahoma;margin:0;}
h2{background:#9cc}
h3{background:#cc9}

table{margin:1em 0}
table,td,tr{font-family:ocr a extended;}

/* Problem1 Mozilla border="1" TABLE{border:none;) bug */
TABLE.mozbug, TABLE.mozbug td, TABLE.mozbug tr{border:none}
TABLE.mozbug TR{border-top:solid}
TABLE.mozbug{border-collapse:collapse;border-top:hidden;}
TABLE.mozbug td{text-align:center}

/* Mozilla bug working in opera and IE */
table.mozie td{text-align:center}
table.mozie, table.mozie td, table.mozie tr {border:none;}
table.mozie{
	border-collapse:collapse;
	border-top:medium solid black;
	border-bottom:medium solid black;
}
table.mozie td{border-left:none;border-bottom:thin solid black;empty-cells:show;}
table.mozie td b{font-size:14px}

/* Problem2 table width*/
/* Opera 6 Table,td{width:100%} even-division bug. Useful for more accurate division in opera 4, 5, 6. */
table.opera6, table.opera6 td {width:100%}

/* table width 100 */
table.WD {width:100%}

</STYLE>
<H2>Example 1 Mozilla border bug.</H2>

<H3>Normal Table</H3>
<TABLE BORDER="1">
<TR><TD>a</TD><TD>b</TD><TD>c</TD></TR>
<TR><TD>3</TD><TD>4</TD><TD>5</TD></TR>
<TR><TD>5</TD><TD>12</TD><TD>13</TD></TR>
</TABLE>

<H3>Mozilla TABLE BORDER="1" TABLE{border:none;) bug.</H3>
<TABLE class="mozbug" BORDER="1">
<TR><TD>a</TD><TD>b</TD><TD>c</TD></TR>
<TR><TD>3</TD><TD>4</TD><TD>5</TD></TR>
<TR><TD>5</TD><TD>12</TD><TD>13</TD></TR>
</TABLE>

<H3>Example that works in IE and Opera5, 6, 7. Also my desired border effect. How can I get this in Mozilla?</H3>
<TABLE class="mozie" BORDER="1">
<TR><TD>a</TD><TD>b</TD><TD>c</TD></TR>
<TR><TD>3</TD><TD>4</TD><TD>5</TD></TR>
<TR><TD>5</TD><TD>12</TD><TD>13</TD></TR>
</TABLE>

<H3>Zeroing or Removing border="1" will fix this in Mozilla, but I don't want to edit the HTML.</H3>
<TABLE class="mozie" BORDER="0">
<TR><TD>a</TD><TD>b</TD><TD>c</TD></TR>
<TR><TD>3</TD><TD>4</TD><TD>5</TD></TR>
<TR><TD>5</TD><TD>12</TD><TD>13</TD></TR>
</TABLE>

<H2>Example 2 Opera 6 TABLE, TD{width:100%} even-division bug.</H2>

<H3>Technically this might be a bug, but the results look so good. Useful for more accurate division in Opera4, 5, 6.</H3>
<TABLE class="opera6" BORDER="1">
<TR><TD>a</TD><TD>b</TD><TD>c</TD></TR>
<TR><TD>3</TD><TD>4</TD><TD>5</TD></TR>
<TR><TD>5</TD><TD>12</TD><TD>13</TD></TR>
</TABLE>

<H3>Table {width:100%} alone produces uneven results</H3>

<TABLE class="WD" BORDER="1">
<TR><TD>a</TD><TD>b</TD><TD>c</TD></TR>
<TR><TD>3</TD><TD>4</TD><TD>5</TD></TR>
<TR><TD>5</TD><TD>12</TD><TD>13</TD></TR>
</TABLE>