Gaurav Sachdeva Gaurav Sachdeva - 1 month ago 5
HTML Question

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 be split into multiple 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!

Answer

The problem as I see it is really that “From :” and “To :” and “Date :” may each get split to two lines. To fix this, add

.first { white-space: nowrap; } 

To fix another layout issue, which you did not ask about, consider adding this, too:

td { vertical-align: top; }

If the email recipient list in the data is really of the format in the example, it’s a bit odd and will be rendered oddly, as a line break may be inserted by a browser at any space but not after “>”. It is more normal to separate addresses by a comma or a semicolon and a space. If you cannot use spaces the, the practical choice is to insert <wbr> tags at allowable breakpoints, as in John Doe <foo@example.com><wbr>Jane Doe <bar@example.com>.