Handling Overflow Row Data in a table
===

I have an HTML table in my web page and there may be many rows in it as it is generated dynamically. The problem i am facing is that When the row data overflows the available width, the whole table css is disturbed.

I need a solution such that if the row data overflows it should come in the next rows, as required to fit all the data.

The HTML is as follows:

	<table>
	<tr>
	<td class='first' >From :</td>
	<td class='second'>Gaurav Sachdeva &lt;gauravs23@ymail.com&gt;</td>
	</tr>
	<tr>
	<td class='first' >To :</td>
	<td class='second' >nerdsachdeva@gmail.com
	   &lt;nerdsachdeva@gmail.com&gt;nerdsachdeva@gmail.com
	   &lt;nerdsachdeva@gmail.com&gt;nerdsachdeva@gmail.com
	   &lt;nerdsachdeva@gmail.com&gt;nerdsachdeva@gmail.com
	   &lt;nerdsachdeva@gmail.com&gt;</td>
	</tr>
	<tr>
	<td class='first'>Date :</td>
	  <td class='second'>Sun, 1 Jul 2012 18:30:48 +0800 (SGT)</td>
	</tr>
	</table>

The css is as follows:

	.first{
	font-size:14px;
	text-align:right;
	font-weight:bold;
	color: grey;
	}
	.second{
	padding-left:10px;
	font-size:14px;
	font-weight: bold;
	color:    black;
	}
All css gurus out there....please help !!!!