Gaurav Sachdeva Gaurav Sachdeva - 10 months ago 36
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:

<td class='first' >From :</td>
<td class='second'>Gaurav Sachdeva &lt;;</td>
<td class='first' >To :</td>
<td class='second' >
<td class='first'>Date :</td>
<td class='second'>Sun, 1 Jul 2012 18:30:48 +0800 (SGT)</td>

The css is as follows:

color: grey;
font-weight: bold;
color: black;

All css gurus out there....please help!

Answer Source

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 <><wbr>Jane Doe <>.