html - html表格中重叠的两个单元格文本

Question

下表有什么问题。下面的单元格重叠是我的代码。实际上我正在通过 gridview 显示这些并且我尝试了所有属性。如何避免单元格文本重叠。我想在表格单元格中显示长文本但无法执行此操作。您可以在 jfddle 中运行此脚本并检查此

 <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 1

像这样尝试: Demo Updated

HTML:

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

希望这就是你想要的。