文章目录

完美解决table中td里面的内容自动换行

对于将td里面的内容自动换行,在很久以前就遇到的了,但是一直没有完美的解决。

今天要打印一个报表,有一列中的内容太长,将table撑得老长实在是影响观感。

于是下决心一定要解决td内容自动换行的问题。

网上有很多说可以解决的,大致有以下几种。

1、在table中加table-layout:fixed;

2、在td中加word-wrap:break-word;word-break:break-all;

但是都能不解决问题。

解决方法如下:

在显示长内容的td里面将内容放在div标签里面。

给div标签加样式

style="width:100%;white-space:normal;word-wrap:break-word;word-break:break-all;"

实例如下:

html代码<style>
.warp{width:100%;white-space:normal;word-wrap:break-word;word-break:break-all;}
</style>
<table cellspacing="0" cellpadding="0" border="1" style="width:750px; margin:5px auto;">
<tr>
    <td style="width:21%;font-weight:bold;text-align:center;">订单编号</td>
    <td style="width:11%;font-weight:bold;text-align:center;">回团日期</td>
    <td style="width:8%;font-weight:bold;text-align:center;">买家昵称</td>
    <td style="font-weight:bold;text-align:center;">宝贝属性</td>
    <td style="width:9%;font-weight:bold;text-align:center;">实付款</td>
    <td style="width:7%;font-weight:bold;text-align:center;">已收款</td>
    <td style="width:12%;font-weight:bold;text-align:center;">成本价(RMB)</td>
    <td style="width:7%;font-weight:bold;text-align:center;">接单人</td>
</tr>
<tr>
    <td class="center">ZH201806262249544298</td>
    <td class="center">2018-08-25</td>
    <td class="center">XP丐帮帮主</td>
    <td><div class="warp">布先生 字母印花 新品短袖男 潮流印花圆领男士上衣</div></td>
    <td class="center">1656.00</td>
    <td class="center">80</td>
    <td class="center">1300.00</td>
    <td class="center">李小洁</td>
</tr>
 <tr>
    <td class="center">ZH201807302154418378</td>
    <td class="center">2018-07-31</td>
    <td class="center">来不及说123</td>
    <td><div class="warp">ins超火的雪纺衬衣女夏季2018韩范新款宽松喇叭袖白色衬衫上衣服</div></td>
    <td class="center">798.00</td>
    <td class="center"></td>
    <td class="center">600.00</td>
    <td class="center">陈海川</td>
</tr>
<tr>
    <td class="center">ZH201807310931228087</td>
    <td class="center">2018-07-31</td>
    <td class="center">流雨的花</td>
    <td><div class="warp">NASO那所 北欧铁艺家用大号带盖脏衣篮衣服收纳筐 欧式简约脏衣篓</div></td>
    <td class="center">1965.00</td>
    <td class="center"></td>
    <td class="center">1460.00</td>
    <td class="center">李胜男</td>
</tr>
<tr>
    <td class="center">ZH201807261115475879</td>
    <td class="center">2018-07-31</td>
    <td class="center">吹花风雪abc</td>
    <td><div class="warp">防水折叠脏衣篮布艺脏衣篓带盖脏衣服收纳筐北欧家用大号洗衣篮子</div></td>
    <td class="center">3.00</td>
    <td class="center"></td>
    <td class="center">40.00</td>
    <td class="center">林杉杉</td>
</tr>
<table>

亲自测试一下

经测试以上代码可以兼容firefox、谷歌、360浏览器,td里面的内容都能自动换行,至于那些老的浏览器没有测试。

完美解决table中td里面的内容自动换行

本文网址:http://www.santii.com/article/215.html


数据更新时间:2018-09-21