Table

by Brett Miley

HTML

<table border="0" cellpadding="1" cellspacing="1" width="100%">
	<tbody>
		<tr>
			<th>Nozzle Part Number</th>
			<th>For Use With V65 Air Cap P/N</th>
			<th>Colour</th>
			<th>Nozzle Size</th>
		</tr>
		<tr>
			<td>80264-07</td>
			<td>80265-00 Air Spray</td>
			<td>Black</td>
			<td>0.7 mm</td>
		</tr>
		<tr>
			<td>80264-10</td>
			<td>80265-00 Air Spray</td>
			<td>Black</td>
			<td>1 mm</td>
		</tr>
		<tr>
			<td>80264-12</td>
			<td>80265-00 Air Spray</td>
			<td>Red</td>
			<td>1.2 mm</td>
		</tr>
		<tr>
			<td>80264-14</td>
			<td>80265-00 Air Spray</td>
			<td>Grey</td>
			<td>1.4 mm</td>
		</tr>
		<tr>
			<td>80264-18</td>
			<td>80265-00 Air Spray</td>
			<td>Green</td>
			<td>1.8 mm</td>
		</tr>
	</tbody>
</table>

CSS

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

table th {
    background: red;
    color: #666;
    font-weight: bold;
}

table td,
table th {
    padding: 4px 10px;
    border: 1px solid #ccc;
    text-align: left;
}

JavaScript

$("th:nth-child(1)").css('background', 'green');
$("th:nth-child(2)").css('background', 'blue');
$("th:nth-child(3)").css('background', 'purple');
$("th:nth-child(4)").css('background', 'gold');

$("th").each( function(i){
	i++;
	$(this).prependTo("td:nth-child("+i+")");
});