Waqas Ali Waqas Ali - 3 months ago 6
CSS Question

two cell text overlapping in html table

What is the wrong with the following table.Its cell overlaping below is my code.Actually I am displaying these through gridview and i tried all the properties.How can avoid cell text overlapping.I want to display long text in table cell but unable to to this.You can run this script in jfddle and check this

<table cellspacing="0" border="1" style="border-collapse:collapse;" id="MainContentPlaceHolder_grdregform" rules="all">
<tbody>
<tr style="background-color:#00FF99;">
<th scope="col">Sr</th>
<th scope="col">Research Title</th>
<th scope="col">Researcher</th>
<th scope="col">Academic Year</th>
<th scope="col">Starting Date of Research</th>
<th scope="col">Expected Finishing Date</th>
<th scope="col">Current Situation</th>
<th scope="col">Update</th>
</tr>
<tr style="background-color:#FFFFCC;">
<td align="center">1</td>
<td><div style="width:100px;"> <span id="MainContentPlaceHolder_grdregform_rtitle_0">qqwqwq111صثضصثضصثصض</span> </div></td>
<td><div style="width:100px;"> <span id="MainContentPlaceHolder_grdregform_researcher_0">wqwq1111ثضصثضصثضصثض</span> </div></td>
<td><span id="MainContentPlaceHolder_grdregform_lblacdyear_0">2006</span></td>
<td align="center">02/09/2015</td>
<td align="center">02/01/2015</td>
<td><span id="MainContentPlaceHolder_grdregform_currentSituation_0">wqewqewqeضضضضضضضضضضض</span></td>
<td></td>
</tr>
<tr style="background-color:Aqua;">
<td align="center">1</td>
<td><div style="width:100px;"> <span id="MainContentPlaceHolder_grdregform_rtitle_1">12121يسبيسسسسسسسسسسسسسسسسسسسسسسسسسسسسسسسسسيبيسبيسبيسبيسبسيبيسبيسب
سيبيسبيب
بسيب
يس
ب
يسب
سيب
سيبسيبيسبيس
سي
ب</span> </div></td>
<td><div style="width:100px;"> <span id="MainContentPlaceHolder_grdregform_researcher_1">2121بسيبيسبيسبيسبيسب21بسيبيسبيسبيسسيشببببببببببببببببببببببببببببببببببببببببببببببببببببببسيبسيبيسبيسبسيبيسبببببببببببببسيبسيبيسبسيبسيبسيبسيبسيبسيبسيبسيبسيبيسبيسبسيبسيبسيبيس</span> </div></td>
<td><span id="MainContentPlaceHolder_grdregform_lblacdyear_1">1</span></td>
<td align="center">02/10/2015</td>
<td align="center">&nbsp;</td>
<td><span id="MainContentPlaceHolder_grdregform_currentSituation_1">121212121ذ21ذ2ذ12ذ1</span></td>
<td></td>
</tr>
<tr style="background-color:#FFFFCC;">
<td align="center">1</td>
<td><div style="width:100px;"> <span id="MainContentPlaceHolder_grdregform_rtitle_2"> e</span> </div></td>
<td><div style="width:100px;"> <span id="MainContentPlaceHolder_grdregform_researcher_2">wqeqwe</span> </div></td>
<td><span id="MainContentPlaceHolder_grdregform_lblacdyear_2">2010</span></td>
<td align="center">02/03/2015</td>
<td align="center">02/02/2015</td>
<td><span id="MainContentPlaceHolder_grdregform_currentSituation_2">qwewqe</span></td>
<td></td>
</tr>
<tr>
<td colspan="8"><table>
<tbody>
<tr>
<td><span>1</span></td>
<td><a href="javascript:__doPostBack('ctl00$MainContentPlaceHolder$grdregform','Page$2')">2</a></td>
<td><a href="javascript:__doPostBack('ctl00$MainContentPlaceHolder$grdregform','Page$3')">3</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>

Answer

Try like this: Demo Updated

HTML:

<div style="width:100px;word-wrap:break-word;">

Hope this is what you want.