CODEWITHSUNDEEP
htmlcss
Waqas Ali
Waqas Ali

Reputation: 53

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>

Upvotes: 2

Views: 8651

Answers (2)

G.L.P
G.L.P

Reputation: 7207

Try like this: Demo Updated

HTML:

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

Hope this is what you want.

Upvotes: 1

Yash Thakur
Yash Thakur

Reputation: 1201

Why are you using width:100px; of the <div> ?

If you want that much width then set overflow:hidden;

Upvotes: 0

Related Questions