Though not referencing an external file, I figured it out by screwing around with having rails update the class name on the server side.
Then I asked myself what happens if I place the CSS in between the style tags of the show.pdf.erb AND IT WORKS. So I took the inline styles within each element. PHEW!
Then the next natural question was what happens if I place the jQuery in the show.pdf.erb at the top, and it works. Do not forget to add before your script:
<%= javascript_include_tag "http://code.jquery.com/jquery-1.10.0.min.js" %>
<%= javascript_include_tag "http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" %>
so the browser understands jQuery. I now have the TR rows and LI rows alternating colors.
Working show.pdf.erb section:
<%= javascript_include_tag "http://code.jquery.com/jquery-1.10.0.min.js" %>
<%= javascript_include_tag "http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" %>
<script>
$(document).ready(function() {
$('table tr:odd').css('background-color', '#cdcdcf');
$('table tr:even').css('background-color', '#fff');
$('table li:odd').css('background-color', '#cdcdcf');
$('table li:even').css('background-color', '#fff');
});
</script>
<table>
<tr>
<td>
<ul>
<li></li>
</ul>
</td>
</tr>
</table>