How to make zebra table with Sphinx? Or how to use jQuery with Sphinx?

I think the table generated from Sphinx is not pretty, as it produces the following HTML code for table.

<table border="1" class="docutils">
<colgroup>
<col width="43%" />
<col width="29%" />
<col width="29%" />
</colgroup>
<thead valign="bottom">
<tr><th class="head">Graph</th>
<th class="head">HIR</th>
<th class="head">AIR</th>
</tr>
</thead>
<tbody valign="top">
<tr><td>Graph</td>
<td>Circuit</td>
<td>System</td>
</tr>
</tbody>
</table>

How can I turn in into pretty one, for example, zebra table?

The HTML generated html has the jQuery, and according to this site, it's just one line of code to have a zebra table, but I'm not sure how to use jQuery to make开发者_如何学运维 a zebra table.

$("tr:nth-child(odd)").addClass("odd");

• Q: How to use jQuery with Sphinx?
• Q: Is there any other way to have a zebra table with Sphinx?

I add the doctools.js the following code

$(document).ready(function() {
  Documentation.init();
  $('tbody tr:even').css('background-color','#dddddd');
});