Fill div background color in Table cell

Fill div background color in Table cell

by Scott

HTML

<p>mytable1 without jQuery</p>
	<table class="myTable1">
	  <tr>
		  <th>Column 1</th>
	  	<th>Column 2</th>
	  </tr>
	  <tr>
		  <td><div class="gray">1</div></td>
		  <td>10 20 30 40 50 60</td>
	  </tr>
	  <tr>
		  <td><div class="gray">2</div></td>
		  <td>80</td>
	  </tr>
	  <tr>
		  <td><div class="gray">3</div></td>
		  <td>75</td>
	  </tr>
	  <tr>
		  <td><div class="gray">4</div></td>
		  <td>30</td>
	  </tr>
	  <tr>
		  <td><div class="gray">5</div></td>
		  <td>21 31 41 51 61 100 200</td>
	  </tr>

	</table>

<p>mytable2 with jQuery</p>
	<table class="myTable2">
	  <tr>
		  <th>Column 1</th>
		  <th>Column 2</th>
	  </tr>
	  <tr>
		  <td><div class="gray">1</div></td>
		  <td>10 20 30 40 50 60</td>
	  </tr>
	  <tr>
	  	<td><div class="gray">2</div></td>
		  <td>80</td>
	  </tr>
	  <tr>
	  	<td><div class="gray">3</div></td>
		  <td>75</td>
	  </tr>
	  <tr>
		  <td><div class="gray">4</div></td>
		  <td>30</td>
	  </tr>
	  <tr>
		  <td><div class="gray">5</div></td>
	  	<td>21 31 41 51 100 200</td>
	  </tr>
	</table>

CSS

table, th , td {
		border: 1px solid grey;
		border-collapse: collapse;
		padding: 0px;
		text-align:center;
	}

	th {
		background:#abcdef;
	}
	.myTable1, .myTable2 {
		width:20px;
	}
	.gray {
		background:#b0b0b0;
	}

JavaScript

$(function(){
		$('.myTable2 tr').each(function(){
		var H1 = $(this).height(); // Get the row height
		$(this).find('td:first').css({'height': H1 + 'px', 'line-height': H1 + 'px'}); //Set td height to row height
		});
	});