Handling Overflow Row Data in a table

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

I'm not really sure what you mean by It should come in the next rows? Do you want the table width to be fixed and split the text if it overflows? Or do you just want to align the text in the two columns? — Niklas
– Niklas, Commented Jul 31, 2012 at 7:41
yes i want the table width to be fixed and split the text into multiple rows if it oveflows..... — Gaurav Sachdeva
– Gaurav Sachdeva, Commented Jul 31, 2012 at 8:00

Jukka K. Korpela · Accepted Answer · 2012-07-31 08:04:17Z

2

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 <[email protected]><wbr>Jane Doe <[email protected]>.

answered Jul 31, 2012 at 8:04

Jukka K. Korpela

203k38 gold badges282 silver badges408 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gaurav Sachdeva Over a year ago

your answer is right on the target jukka.....thanks a lot....u made my job easy :)

Varun Sridharan · Accepted Answer · 2012-08-10 04:21:32Z

1

just replace this css with the below one Or Set Width For Your Table I Can See That There To Width defiened For Your Table. Width May Fix The Problem

.first
{
font-size:14px;
text-align:right;
font-weight:bold;
color: grey;
}

.second
{
padding-left:10px;
font-size:14px;
font-weight: bold;
color:    black;
overflow:hidden;
}

edited Aug 10, 2012 at 4:21

answered Jul 31, 2012 at 7:39

Varun Sridharan

1,9882 gold badges21 silver badges56 bronze badges

1 Comment

Gaurav Sachdeva Over a year ago

@varun....overflow hidden will hide my data....this is not my requirement....i want to display all my data in the next rows if it overflows....

Varun Sridharan · Accepted Answer · 2012-07-31 08:15:16Z

ok check here now

<style>
.first{
font-size:14px;
text-align:right;
font-weight:bold;
color: grey;

}
.second{
padding-left:10px;
font-size:14px;
font-weight: bold;
color:    black;
    overflow:hidden;
}

</style>
<table cellspacing="5px" cellpadding="5px" style="width:525px;">
<tr>
<td class='first' style="width:57px;">From :</td>
<td class='second'>Gaurav Sachdeva &lt;[email protected]&gt;</td>
</tr>
<tr>
<td class='first' style="width:57px;">To :</td>
<td class='second' >[email protected]
   &lt;[email protected]&gt;[email protected]
   &lt;[email protected]&gt;[email protected]
   &lt;[email protected]&gt;[email protected]
   &lt;[email protected]&gt;</td>
</tr>
<tr>
<td class='first' style="width:57px;">Date :</td>
  <td class='second'>Sun, 1 Jul 2012 18:30:48 +0800 (SGT)</td>
</tr>
</table>

Collectives™ on Stack Overflow

Handling Overflow Row Data in a table

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related