Styling multiple tables
Styling multiple tables
I have multiple tables with this similar structure:
- <table>
- <tr>
- <th>Transaction Date</th>
- <th>Description</th>
- <th>Points</th>
- </tr>
- <tr>
- <td>04/11/2011</td>
- <td>New account bonus</td>
- <td>100</td>
- </tr>
- <tr>
- <td>04/11/2011</td>
- <td>New account bonus</td>
- <td>100</td>
- </tr>
- <tr>
- <td>04/11/2011</td>
- <td>New account bonus</td>
- <td>100</td>
- </tr>
- </table>
I want to surround the central part of the table (not the th cells) with a border and have every other line starting with the first one below the table headers to be gray. Here are the styles I created
- .tabletop {
- border-top:1px solid #818180;
- }
- .tablebottom {
- border-bottom:1px solid #818180;
- }
- .tablemiddle {
- border-right:1px solid #818180;
- border-left:1px solid #818180;
- }
- .tablegray {
- background-color:#dddddd;
- }
And this is the start of my jquery code
- $(document).ready(function() {
- $("tr:has(td)").addClass("tablemiddle");
- $("table tr:has(td):last").addClass("tablebottom");
- $("table").each(function() {
- $(this).children("tr:has(td):even").addClass("tablegray"); //this isn't working
- });
- });
I'm trying to get it so that the top row under the header is gray. The above code isn't working and if I try this:
- $("tr:has(td):even").addClass("tablegray");
instead of the table.each it obviously grabs ALL of the rows on the page which means that sometimes the top row isn't gray.
Additionally, how do I select the first table row with td's in each table to apply tabletop?
And how to select the last row in each table? This doesn't work:
- $("table tr:has(td):last").addClass("tablebottom");
Thanks in advance for any help!