Question

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;[e-mail]&gt;</td>
</tr>
<tr>
<td class='first' >To :</td>
<td class='second' >[e-mail]
   &lt;[e-mail]&gt;[e-mail]
   &lt;[e-mail]&gt;[e-mail]
   &lt;[e-mail]&gt;[e-mail]
   &lt;[e-mail]&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 1

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 <[e-mail]><wbr>Jane Doe <[e-mail]>.