<?xml version="1.0" encoding="UTF-8"?><rss
version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
> <channel><title>Comments on: Styling Zebra Striped Tables With CSS</title> <atom:link href="http://www.cssnewbie.com/styling-zebra-striped-tables-with-css/feed/" rel="self" type="application/rss+xml" /><link>http://www.cssnewbie.com/styling-zebra-striped-tables-with-css/</link> <description>Web Development Tutorials, Tips &#38; Techniques</description> <lastBuildDate>Tue, 07 Feb 2012 11:23:26 +0000</lastBuildDate> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.0.1</generator> <item><title>By: Christopher Thomas</title><link>http://www.cssnewbie.com/styling-zebra-striped-tables-with-css/comment-page-1/#comment-13643</link> <dc:creator>Christopher Thomas</dc:creator> <pubDate>Sat, 29 Oct 2011 11:16:52 +0000</pubDate> <guid
isPermaLink="false">http://www.cssnewbie.com/?p=233#comment-13643</guid> <description>This article is misleading, it should be named &quot;Styling Zebra Striped Tables with jQuery&quot;the reason I say that is because at no time do you use CSS to control the zebra stripes.I would have thought a developer would understand the difference.  HERE is how to do it using CSS ONLY!!tr:nth-child(even){ background-color: #FFFFFF; }
tr:nth-child(odd){ background-color: #CCFFFF; }This will require a modern browser, but if you&#039;re handicapped with IE, you can use ie9.js from here: http://code.google.com/p/ie7-js/source/browse/trunk/lib/IE9.js?r=35to make IE work correctly and this also fixes up a lot of crap you normally have to deal with.</description> <content:encoded><![CDATA[<p>This article is misleading, it should be named &#8220;Styling Zebra Striped Tables with jQuery&#8221;</p><p>the reason I say that is because at no time do you use CSS to control the zebra stripes.</p><p>I would have thought a developer would understand the difference.  HERE is how to do it using CSS ONLY!!</p><p>tr:nth-child(even){ background-color: #FFFFFF; }<br
/> tr:nth-child(odd){ background-color: #CCFFFF; }</p><p>This will require a modern browser, but if you&#8217;re handicapped with IE, you can use ie9.js from here: <a
href="http://code.google.com/p/ie7-js/source/browse/trunk/lib/IE9.js?r=35" rel="nofollow">http://code.google.com/p/ie7-js/source/browse/trunk/lib/IE9.js?r=35</a></p><p>to make IE work correctly and this also fixes up a lot of crap you normally have to deal with.</p> ]]></content:encoded> </item> <item><title>By: Citeste asta</title><link>http://www.cssnewbie.com/styling-zebra-striped-tables-with-css/comment-page-1/#comment-13422</link> <dc:creator>Citeste asta</dc:creator> <pubDate>Thu, 05 May 2011 17:15:21 +0000</pubDate> <guid
isPermaLink="false">http://www.cssnewbie.com/?p=233#comment-13422</guid> <description>Amazing post, honest!&lt;a href=&quot;http://cica.ro/p/t9Iw4Rg&quot; rel=&quot;nofollow&quot;&gt;http://cica.ro/p/t9Iw4Rg&lt;/a&gt;</description> <content:encoded><![CDATA[<p>Amazing post, honest!</p><p><a
href="http://cica.ro/p/t9Iw4Rg" rel="nofollow">http://cica.ro/p/t9Iw4Rg</a></p> ]]></content:encoded> </item> <item><title>By: Ben</title><link>http://www.cssnewbie.com/styling-zebra-striped-tables-with-css/comment-page-1/#comment-13275</link> <dc:creator>Ben</dc:creator> <pubDate>Thu, 17 Feb 2011 03:04:55 +0000</pubDate> <guid
isPermaLink="false">http://www.cssnewbie.com/?p=233#comment-13275</guid> <description>This is pure CSS:.striped tr:nth-of-type(2n+0)
{
background-color: #def;
}(Add salt and pepper to taste)Though for IE &lt; 9 and FF &lt; 3.5 you&#039;ll need the js solution still!</description> <content:encoded><![CDATA[<p>This is pure CSS:</p><p>.striped tr:nth-of-type(2n+0)<br
/> {<br
/> background-color: #def;<br
/> }</p><p>(Add salt and pepper to taste)</p><p>Though for IE &lt; 9 and FF &lt; 3.5 you&#039;ll need the js solution still!</p> ]]></content:encoded> </item> <item><title>By: Walter Wimberly</title><link>http://www.cssnewbie.com/styling-zebra-striped-tables-with-css/comment-page-1/#comment-13240</link> <dc:creator>Walter Wimberly</dc:creator> <pubDate>Wed, 02 Feb 2011 16:12:30 +0000</pubDate> <guid
isPermaLink="false">http://www.cssnewbie.com/?p=233#comment-13240</guid> <description>I&#039;m trying to see how much zebra striping vs row hight lighting in large tables, (Enders looked only at smaller tables) and have a on-line survey you can participate in if you are interested: http://access2learn.com/survey1/When I developed the table, I used the same method you show here for applying the zebra stripe, but had to use a little more complicated jQuery for highlighting. If you look at the source code of the external javascript, you can see what I did.</description> <content:encoded><![CDATA[<p>I&#8217;m trying to see how much zebra striping vs row hight lighting in large tables, (Enders looked only at smaller tables) and have a on-line survey you can participate in if you are interested: <a
href="http://access2learn.com/survey1/" rel="nofollow">http://access2learn.com/survey1/</a></p><p>When I developed the table, I used the same method you show here for applying the zebra stripe, but had to use a little more complicated jQuery for highlighting. If you look at the source code of the external javascript, you can see what I did.</p> ]]></content:encoded> </item> <item><title>By: Rob Glazebrook</title><link>http://www.cssnewbie.com/styling-zebra-striped-tables-with-css/comment-page-1/#comment-13034</link> <dc:creator>Rob Glazebrook</dc:creator> <pubDate>Mon, 18 Oct 2010 18:36:54 +0000</pubDate> <guid
isPermaLink="false">http://www.cssnewbie.com/?p=233#comment-13034</guid> <description>Hey Robert,To get this to work on one table (or one set of tables) and not others, just give that table a class (&quot;striped&quot;, for example), then change your jQuery to read like this instead:
&lt;pre&gt;$(document).ready(function(){
$(&quot;.striped tr:odd&quot;).addClass(&quot;odd&quot;);
});&lt;/pre&gt;</description> <content:encoded><![CDATA[<p>Hey Robert,</p><p>To get this to work on one table (or one set of tables) and not others, just give that table a class (&#8220;striped&#8221;, for example), then change your jQuery to read like this instead:</p><pre>$(document).ready(function(){
	$(".striped tr:odd").addClass("odd");
});</pre>]]></content:encoded> </item> <item><title>By: Robertonugen</title><link>http://www.cssnewbie.com/styling-zebra-striped-tables-with-css/comment-page-1/#comment-13024</link> <dc:creator>Robertonugen</dc:creator> <pubDate>Fri, 15 Oct 2010 17:09:39 +0000</pubDate> <guid
isPermaLink="false">http://www.cssnewbie.com/?p=233#comment-13024</guid> <description>Is there a way to restrict this working on one table and not another on the same page?</description> <content:encoded><![CDATA[<p>Is there a way to restrict this working on one table and not another on the same page?</p> ]]></content:encoded> </item> <item><title>By: e11world</title><link>http://www.cssnewbie.com/styling-zebra-striped-tables-with-css/comment-page-1/#comment-12927</link> <dc:creator>e11world</dc:creator> <pubDate>Thu, 19 Aug 2010 07:36:53 +0000</pubDate> <guid
isPermaLink="false">http://www.cssnewbie.com/?p=233#comment-12927</guid> <description>Out of 14 different places I visited to get this right, I finally figured out why with this tutorial. I guess I was probably doing it right all along EXCEPT FOR I WAS USING ONE quotation instead of the double (to keep my code all the same).
Thanks for the help!</description> <content:encoded><![CDATA[<p>Out of 14 different places I visited to get this right, I finally figured out why with this tutorial. I guess I was probably doing it right all along EXCEPT FOR I WAS USING ONE quotation instead of the double (to keep my code all the same).<br
/> Thanks for the help!</p> ]]></content:encoded> </item> <item><title>By: Zebra-striping in PHP for Drupal or WordPress CMS &#124; Likemind Web Services</title><link>http://www.cssnewbie.com/styling-zebra-striped-tables-with-css/comment-page-1/#comment-9996</link> <dc:creator>Zebra-striping in PHP for Drupal or WordPress CMS &#124; Likemind Web Services</dc:creator> <pubDate>Sun, 27 Sep 2009 15:31:29 +0000</pubDate> <guid
isPermaLink="false">http://www.cssnewbie.com/?p=233#comment-9996</guid> <description>[...] when working in a PHP-based CMS you find that you want to zebra-stripe a list or table of items but the CMS&#8217;s template system makes that hard to achieve. Typically [...]</description> <content:encoded><![CDATA[<p>[...] when working in a PHP-based CMS you find that you want to zebra-stripe a list or table of items but the CMS&#8217;s template system makes that hard to achieve. Typically [...]</p> ]]></content:encoded> </item> <item><title>By: Denny &#124; Entrepreneur</title><link>http://www.cssnewbie.com/styling-zebra-striped-tables-with-css/comment-page-1/#comment-9901</link> <dc:creator>Denny &#124; Entrepreneur</dc:creator> <pubDate>Fri, 21 Aug 2009 23:29:48 +0000</pubDate> <guid
isPermaLink="false">http://www.cssnewbie.com/?p=233#comment-9901</guid> <description>Accidentally found my way into my first use of jQuery. Pretty cool!</description> <content:encoded><![CDATA[<p>Accidentally found my way into my first use of jQuery. Pretty cool!</p> ]]></content:encoded> </item> <item><title>By: Rob Glazebrook</title><link>http://www.cssnewbie.com/styling-zebra-striped-tables-with-css/comment-page-1/#comment-9780</link> <dc:creator>Rob Glazebrook</dc:creator> <pubDate>Mon, 15 Jun 2009 13:39:46 +0000</pubDate> <guid
isPermaLink="false">http://www.cssnewbie.com/?p=233#comment-9780</guid> <description>Hi Stuart,Entertaining. :) I&#039;m running a spam catcher on the admin side of things which catches 99% of the spam that comes through this site. The other 1% I delete manually every couple of days. Yours doesn&#039;t count as spam, though, so it stays.</description> <content:encoded><![CDATA[<p>Hi Stuart,</p><p>Entertaining. :) I&#8217;m running a spam catcher on the admin side of things which catches 99% of the spam that comes through this site. The other 1% I delete manually every couple of days. Yours doesn&#8217;t count as spam, though, so it stays.</p> ]]></content:encoded> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk (user agent is rejected)

Served from: www.cssnewbie.com @ 2012-02-08 03:39:47 -->
