1. 程式人生 > >table表格td設定寬度後文字太多自動換行

table表格td設定寬度後文字太多自動換行

table表格td設定寬度後文字太多導致自動換行

主要需要兩部:

1.設定表格table的樣式為style=”table-layout:fixed;”

2.然後設定td的樣式為style=”word-wrap:break-word;”

程式碼如下:

Html程式碼

<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>&#23621;&#27665;&#36523;&#20221;&#35777;</td> <td>711674650903444564</td
>
<td></td> <td style="word-wrap:break-word;"></td> <td style="word-wrap:break-word;">c2VydmVyQ3Nw|bzNH6t4DSLhjUqdg2OLkrnQ3EXceQeppPo0BYItTPtbJPImIgCW3uS9vEw3lQ55cx0kNVdszP42odrIqNoWGTrZFruSmnEmAlwl2UTejZwGZ5Q8yyWx5TmjuarkUbRYXZpypMukoyxX2VPmXJIiHUaZQM6hzssEXlQ1563nEl4w=</td> <td>[email protected]</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>&#23621;&#27665;&#36523;&#20221;&#35777;</td> <td>308926257733043268</td> <td></td> <td style="word-wrap:break-word;"></td> <td style="word-wrap:break-word;">8827768271</td> <td>[email protected]</td> <td><a href="javascript:view('af1005c4-48cd-4e3c-8bc6-2af84dbddd15')" class="search-btn2 mlr5" >詳情</a></td> </tr> </table>

轉載地址: http://liuna718-163-com.iteye.com/blog/1944299