td自动换行

<table width="98%" border="0" align="center" cellpadding="1"
cellspacing="1" bgcolor="#D6D6D6" style="table-layout: fixed;">
<tr>
<td width="15%" class="table-bg">检查项目</td>
<td width="10%" class="table-bg">缩写</td>
<td width="20%" class="table-bg"     >结果</td>
<td width="20%" class="table-bg">是否异常</td>
<td width="20%" class="table-bg">参考值</td>
<td width="30%" class="table-bg">单位</td>
</tr>
<c:if test="${!empty isList}">
 <c:forEach items="${isList}" var="item" varStatus="s">
 <tr>
   <td class="table-td">${item.itemName}</td>
<td class="table-td">${item.suoxie}</td>
<td class="table-td">${item.value}</td>
<c:if test="${item.flag!='否'}">
<td class="table-td" style="${item.colorCode}" align="center">
${item.flag}
</td>
</c:if>
<c:if test="${item.flag=='否'}">
  <td class="table-td" style="${item.colorCode}" align="center">
   ${item.flag}
  </td>
</c:if>
<c:choose>
<c:when test="${!empty item.minValue}">
  <c:choose>
    <c:when test="${!empty item.maxValue}">
      <td class="table-td">${item.minValue}~${item.maxValue}</td>
    </c:when>
    <c:otherwise>
      <td class="table-td">大于  ${item.minValue}</td>
    </c:otherwise>
  </c:choose>
</c:when>
<c:otherwise>
  <c:choose>
  <c:when test="${!empty item.maxValue}">
      <td class="table-td">小于  ${item.maxValue}</td>
    </c:when>
    <c:otherwise>
      <td class="table-td"></td>
    </c:otherwise>
  </c:choose>
</c:otherwise>
</c:choose>
<td class="table-td">${item.danwei}</td>
</tr>
 </c:forEach>
 
</c:if>
<c:if test="${empty isList}">
<tr>
<td class="table-td" colspan="6" align="center">无数据</td>
</tr>
</c:if>

</table>

这里的结果字很多,显示不全,所以在td属性加上style="word-break:break-all",还有就是table的style="table-layout: fixed;"这个属性要去掉,这个属性的意思就是固定布局,

不让动了,所以就不好使了,总结:去掉table的style="table-layout: fixed;"和加上该td的style="word-break:break-all"就可以了


<table width="98%" border="0" align="center" cellpadding="1"
cellspacing="1" bgcolor="#D6D6D6"    >
<tr>
<td width="15%" class="table-bg">检查项目</td>
<td width="10%" class="table-bg">缩写</td>
<td width="20%" class="table-bg" style="word-break:break-all">结果</td>
<td width="20%" class="table-bg">是否异常</td>
<td width="20%" class="table-bg">参考值</td>
<td width="30%" class="table-bg">单位</td>
</tr>
<c:if test="${!empty isList}">
  <c:forEach items="${isList}" var="item" varStatus="s">
  <tr>
    <td class="table-td">${item.itemName}</td>
<td class="table-td">${item.suoxie}</td>
<td class="table-td">${item.value}</td>
 <c:if test="${item.flag!='否'}">
<td class="table-td" style="${item.colorCode}" align="center">
${item.flag}
</td>
</c:if>
 <c:if test="${item.flag=='否'}">
   <td class="table-td" style="${item.colorCode}" align="center">
    ${item.flag}
   </td>
 </c:if>
<c:choose>
 <c:when test="${!empty item.minValue}">
   <c:choose>
     <c:when test="${!empty item.maxValue}">
       <td class="table-td">${item.minValue}~${item.maxValue}</td>
     </c:when>
     <c:otherwise>
       <td class="table-td">大于  ${item.minValue}</td>
     </c:otherwise>
   </c:choose>
 </c:when>
 <c:otherwise>
   <c:choose>
   <c:when test="${!empty item.maxValue}">
       <td class="table-td">小于  ${item.maxValue}</td>
     </c:when>
     <c:otherwise>
       <td class="table-td"></td>
     </c:otherwise>
   </c:choose>
 </c:otherwise>
</c:choose>
<td class="table-td">${item.danwei}</td>
</tr>
  </c:forEach>
  
</c:if>
<c:if test="${empty isList}">
<tr>
<td class="table-td" colspan="6" align="center">无数据</td>
</tr>
</c:if>
</table>

-----------------------------------------网上资料----------------------------------------------

<td   height=80   width=400> 

 的地方的发送到是否萨顶顶范德萨发生的发生的范德萨发到付顶顶顶顶顶顶顶顶顶顶顶顶顶顶ddd
四谛法四谛法的
</td>   
如果string很长超过200,那么 <td> 不会自动换行,还是一直的在同一行显示,把它旁边的table都撑开了。
 
如果需要HTML自动按照td的长度换行的话,只需要按照这样子写:
 
 <td   height=80   width=400 style="word-break:break-all">

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值