kkfgef
21 Jul 2010, 12:39 AM
How to use css or css3 control like the style of each column
don't like this:tbody tr td:first-child+td+td {}……This was too much trouble
don't like this: …… Because this in Firefox and other standards browsers useless
There are other ways?
IE browser I have to give up and ignore
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to use css control the column</title>
<style type="text/css">
<!--
.STYLE1 {color: #FFFFFF}
.STYLE2 {color: #FFFFFF; font-weight: bold; }
.STYLE4 {color: #FFFFFF; font-weight: bold; font-style: italic; }
.STYLE5 {color: #FF0000}
-->
</style>
</head>
<body>
<table width="482" height="171" border="1">
<tr>
<td width="66" bgcolor="#CCCCCC"><div align="center"><strong>one</strong></div></td>
<td width="36" bgcolor="#006633"><div align="right" class="STYLE1">two</div></td>
<td width="57" bgcolor="#FF9999"><div align="center">three </div></td>
<td width="36" bgcolor="#FF0000">four</td>
<td width="34" bgcolor="#996600"><div align="right" class="STYLE2">five</div></td>
<td width="44" bgcolor="#99CC99"><span class="STYLE5">six</span></td>
<td width="42" bgcolor="#CC6600"><div align="center">seven</div></td>
<td width="51" bgcolor="#000000"><span class="STYLE4">eight</span></td>
<td width="58" bgcolor="#3399FF"><div align="right"><strong>nine</strong></div></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><div align="center"><strong>nine</strong></div></td>
<td bgcolor="#006633"><div align="right" class="STYLE1">eight</div></td>
<td bgcolor="#FF9999"><div align="center">seven</div></td>
<td bgcolor="#FF0000">six</td>
<td bgcolor="#996600"><div align="right" class="STYLE2">five</div></td>
<td bgcolor="#99CC99"><span class="STYLE5">four</span></td>
<td bgcolor="#CC6600"><div align="center">three</div></td>
<td bgcolor="#000000"><span class="STYLE4">two</span></td>
<td bgcolor="#3399FF"><div align="right"><strong>one</strong></div></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><div align="center"><strong>Content</strong></div></td>
<td bgcolor="#006633"><div align="right" class="STYLE1">title</div></td>
<td bgcolor="#FF9999"><div align="center">span</div></td>
<td bgcolor="#FF0000">div</td>
<td bgcolor="#996600"><div align="right" class="STYLE2">th</div></td>
<td bgcolor="#99CC99"><span class="STYLE5">td</span></td>
<td bgcolor="#CC6600"><div align="center">tr</div></td>
<td bgcolor="#000000"><span class="STYLE4">table</span></td>
<td bgcolor="#3399FF"><div align="right"><strong>p</strong></div></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><div align="center"><strong>body</strong></div></td>
<td bgcolor="#006633"><div align="right" class="STYLE1">head</div></td>
<td bgcolor="#FF9999"><div align="center">box</div></td>
<td bgcolor="#FF0000">class</td>
<td bgcolor="#996600"><div align="right" class="STYLE2">id</div></td>
<td bgcolor="#99CC99"><span class="STYLE5">dd</span></td>
<td bgcolor="#CC6600"><div align="center">dt</div></td>
<td bgcolor="#000000"><span class="STYLE4">dl</span></td>
<td bgcolor="#3399FF"><div align="right"><strong>ul</strong></div></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><div align="center"><strong>li</strong></div></td>
<td bgcolor="#006633"><div align="right" class="STYLE1">ol</div></td>
<td bgcolor="#FF9999"><div align="center">any</div></td>
<td bgcolor="#FF0000">girl</td>
<td bgcolor="#996600"><div align="right" class="STYLE2">boy</div></td>
<td bgcolor="#99CC99"><span class="STYLE5">up</span></td>
<td bgcolor="#CC6600"><div align="center">down</div></td>
<td bgcolor="#000000"><span class="STYLE4">left</span></td>
<td bgcolor="#3399FF"><div align="right"><strong>right</strong></div></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><div align="center"><strong>white</strong></div></td>
<td bgcolor="#006633"><div align="right" class="STYLE1">black</div></td>
<td bgcolor="#FF9999"><div align="center">green</div></td>
<td bgcolor="#FF0000">red</td>
<td bgcolor="#996600"><div align="right" class="STYLE2">gold</div></td>
<td bgcolor="#99CC99"><span class="STYLE5">blue</span></td>
<td bgcolor="#CC6600"><div align="center">yellow</div></td>
<td bgcolor="#000000"><span class="STYLE4">orange</span></td>
<td bgcolor="#3399FF"><div align="right"><strong>pink</strong></div></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><div align="center"><strong>middle</strong></div></td>
<td bgcolor="#006633"><div align="right" class="STYLE1">top</div></td>
<td bgcolor="#FF9999"><div align="center">bottom</div></td>
<td bgcolor="#FF0000">foot</td>
<td bgcolor="#996600"><div align="right" class="STYLE2">main</div></td>
<td bgcolor="#99CC99"><span class="STYLE5">side</span></td>
<td bgcolor="#CC6600"><div align="center">ten</div></td>
<td bgcolor="#000000"><span class="STYLE4">css</span></td>
<td bgcolor="#3399FF"><div align="right"><strong>html</strong></div></td>
</tr>
</table><p>How to use css or css3 control like the style of each column</p>
<p>don't like this:tbody tr td:first-child+td+td {}……This was too much trouble！</p>
<p>don't like this: <colgroup><col class="tda"><col class="tdb">……</colgroup>
Because this in Firefox and other standards browsers useless</p>
<p>There are other ways?</p><p>IE browser I have to give up and ignore</p>
</body>
</html>
don't like this:tbody tr td:first-child+td+td {}……This was too much trouble
don't like this: …… Because this in Firefox and other standards browsers useless
There are other ways?
IE browser I have to give up and ignore
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to use css control the column</title>
<style type="text/css">
<!--
.STYLE1 {color: #FFFFFF}
.STYLE2 {color: #FFFFFF; font-weight: bold; }
.STYLE4 {color: #FFFFFF; font-weight: bold; font-style: italic; }
.STYLE5 {color: #FF0000}
-->
</style>
</head>
<body>
<table width="482" height="171" border="1">
<tr>
<td width="66" bgcolor="#CCCCCC"><div align="center"><strong>one</strong></div></td>
<td width="36" bgcolor="#006633"><div align="right" class="STYLE1">two</div></td>
<td width="57" bgcolor="#FF9999"><div align="center">three </div></td>
<td width="36" bgcolor="#FF0000">four</td>
<td width="34" bgcolor="#996600"><div align="right" class="STYLE2">five</div></td>
<td width="44" bgcolor="#99CC99"><span class="STYLE5">six</span></td>
<td width="42" bgcolor="#CC6600"><div align="center">seven</div></td>
<td width="51" bgcolor="#000000"><span class="STYLE4">eight</span></td>
<td width="58" bgcolor="#3399FF"><div align="right"><strong>nine</strong></div></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><div align="center"><strong>nine</strong></div></td>
<td bgcolor="#006633"><div align="right" class="STYLE1">eight</div></td>
<td bgcolor="#FF9999"><div align="center">seven</div></td>
<td bgcolor="#FF0000">six</td>
<td bgcolor="#996600"><div align="right" class="STYLE2">five</div></td>
<td bgcolor="#99CC99"><span class="STYLE5">four</span></td>
<td bgcolor="#CC6600"><div align="center">three</div></td>
<td bgcolor="#000000"><span class="STYLE4">two</span></td>
<td bgcolor="#3399FF"><div align="right"><strong>one</strong></div></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><div align="center"><strong>Content</strong></div></td>
<td bgcolor="#006633"><div align="right" class="STYLE1">title</div></td>
<td bgcolor="#FF9999"><div align="center">span</div></td>
<td bgcolor="#FF0000">div</td>
<td bgcolor="#996600"><div align="right" class="STYLE2">th</div></td>
<td bgcolor="#99CC99"><span class="STYLE5">td</span></td>
<td bgcolor="#CC6600"><div align="center">tr</div></td>
<td bgcolor="#000000"><span class="STYLE4">table</span></td>
<td bgcolor="#3399FF"><div align="right"><strong>p</strong></div></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><div align="center"><strong>body</strong></div></td>
<td bgcolor="#006633"><div align="right" class="STYLE1">head</div></td>
<td bgcolor="#FF9999"><div align="center">box</div></td>
<td bgcolor="#FF0000">class</td>
<td bgcolor="#996600"><div align="right" class="STYLE2">id</div></td>
<td bgcolor="#99CC99"><span class="STYLE5">dd</span></td>
<td bgcolor="#CC6600"><div align="center">dt</div></td>
<td bgcolor="#000000"><span class="STYLE4">dl</span></td>
<td bgcolor="#3399FF"><div align="right"><strong>ul</strong></div></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><div align="center"><strong>li</strong></div></td>
<td bgcolor="#006633"><div align="right" class="STYLE1">ol</div></td>
<td bgcolor="#FF9999"><div align="center">any</div></td>
<td bgcolor="#FF0000">girl</td>
<td bgcolor="#996600"><div align="right" class="STYLE2">boy</div></td>
<td bgcolor="#99CC99"><span class="STYLE5">up</span></td>
<td bgcolor="#CC6600"><div align="center">down</div></td>
<td bgcolor="#000000"><span class="STYLE4">left</span></td>
<td bgcolor="#3399FF"><div align="right"><strong>right</strong></div></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><div align="center"><strong>white</strong></div></td>
<td bgcolor="#006633"><div align="right" class="STYLE1">black</div></td>
<td bgcolor="#FF9999"><div align="center">green</div></td>
<td bgcolor="#FF0000">red</td>
<td bgcolor="#996600"><div align="right" class="STYLE2">gold</div></td>
<td bgcolor="#99CC99"><span class="STYLE5">blue</span></td>
<td bgcolor="#CC6600"><div align="center">yellow</div></td>
<td bgcolor="#000000"><span class="STYLE4">orange</span></td>
<td bgcolor="#3399FF"><div align="right"><strong>pink</strong></div></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><div align="center"><strong>middle</strong></div></td>
<td bgcolor="#006633"><div align="right" class="STYLE1">top</div></td>
<td bgcolor="#FF9999"><div align="center">bottom</div></td>
<td bgcolor="#FF0000">foot</td>
<td bgcolor="#996600"><div align="right" class="STYLE2">main</div></td>
<td bgcolor="#99CC99"><span class="STYLE5">side</span></td>
<td bgcolor="#CC6600"><div align="center">ten</div></td>
<td bgcolor="#000000"><span class="STYLE4">css</span></td>
<td bgcolor="#3399FF"><div align="right"><strong>html</strong></div></td>
</tr>
</table><p>How to use css or css3 control like the style of each column</p>
<p>don't like this:tbody tr td:first-child+td+td {}……This was too much trouble！</p>
<p>don't like this: <colgroup><col class="tda"><col class="tdb">……</colgroup>
Because this in Firefox and other standards browsers useless</p>
<p>There are other ways?</p><p>IE browser I have to give up and ignore</p>
</body>
</html>