Question

table的宽度设为100%时如何让td自动换行

Answer 1

<td>是否自动换行与宽度无关，换句话说你改变table的宽度，并不影响td是否换行的属性。

一般情况下换行与文本有关，例如一般英语不允许单词换行，但是可以使用下面的CSS属性改变他们：

word-wrap : normal | break-word
参数：
normal : 　允许内容顶开指定的容器边界
break-word
: 　内容将在边界内换行。如果需要，词内换行（word-break）也行发生

word-break : normal | break-all | keep-all

参数：
normal :
　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all :
　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :
　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明：

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文，应该使用break-all 。

对应的脚本特性为wordBreak。请参阅我编写的其他书目。

white-space : normal | pre |
nowrap
参数：
normal :
　默认处理方式
pre : 　用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象

nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。参阅td，div等对象的nowrap属性（特性）

追问

我在td上这样写的td{word-break: break-all; word-wrap:break-word;}不起作用 除非我我加上这句table{table-layout: fixed;} 才起作用 但是我加上这句后我的table的100%就不起作用了

追答

你现在TD不换行、导致TABLE超过了吗，内容是中文还是英文、图片，你方便对效果拷屏、粘贴相关代码吗？

追问

中文会自动换行 英文不会 但是我加上td{word-break: break-all; word-wrap:break-word;} table{table-layout: fixed;}这两句就能自动换行了 我table只设置了宽百分百 td没设置宽 如果不加这两句 它就会把table撑开

追答

你这追问表示你的问题已解决吗？如果还没有，请粘贴代码、拷屏效果。

Answer 2

需要两步：
1.设置表格table的样式为style="table-layout:fixed;"
2.然后设置td的样式为style="word-wrap:break-word;"
比如：
<table width="88%" class="table1 tc mt10" style="table-layout:fixed;" >
<tr class="evertop">
<th width="7%">序号</th>
<th width="12%">姓名</th>
<th width="12%">证件类型</th>
<th width="14%">证件号</th>
<th width="7%">性别</th>
<th width="12%">出生日期</th>
<th width="12%">手机号</th>
<th width="14%">电子邮箱</th>
<th width="7%">操作</th>
</tr>

<tr class='on'>
<td>1</td>
<td>中秋加班班25</td>
<td>居民身份证</td>
<td>711674650903444564</td>
<td>女</td>
<td style="word-wrap:break-word;"></td>
<td style="word-wrap:break-word;">c2VydmVyQ3Nw|bzNH6t4DSLhjUqdg2OLkrnQ3EXceQeppPo0BYItTPtbJPImIgCW3uS9vEw3lQ55cx0kNVdszP42odrIqNoWGTrZFruSmnEmAlwl2UTejZwGZ5Q8yyWx5TmjuarkUbRYXZpypMukoyxX2VPmXJIiHUaZQM6hzssEXlQ1563nEl4w=</td>
<td>pp25@qq.com</td>
<td><a href="javascript:view('b23f9597-6fd2-48c5-b5fd-e1aae8d5225b')" class="search-btn2 mlr5" >详情</a></td>
</tr>
<tr >
<td>2</td>
<td>中秋加班班54</td>
<td>居民身份证</td>
<td>308926257733043268</td>
<td>女</td>
<td style="word-wrap:break-word;"></td>
<td style="word-wrap:break-word;">8827768271</td>
<td>pp54@qq.com</td>
<td><a href="javascript:view('af1005c4-48cd-4e3c-8bc6-2af84dbddd15')" class="search-btn2 mlr5" >详情</a></td>
</tr>
</table>