转载：table单元格内容自动换行

转载于：http://blog.csdn.net/limengmeng9006/article/details/10001107

1、设置table中的单元格内容自动换行，使用word-wrap在IE浏览器中支持，在firefox浏览器的3.5版本以上开始支持，所以为了满足浏览器兼容性，需要在table中设置table-layout:fixed。

2、word-wrap在div属性中能起到换行的作用，也可以在td中使用div,在div里面设置。

<style type="text/css">
        table{border:1px red solid;height:300px; border-collapse: collapse;}
        table tr td{border:1px red solid;}
    </style>

  <table width="600px" style="table-layout:fixed;word-wrap:break-word;" >
    <tr style="background-color:#F9F7FC;">
        <td style="width:120px;">全是中文有标点</td>
        <td style="width:120px;">全是中文无标点</td>
        <td style="width:120px;">全是英文有标点</td>
        <td style="width:120px;">中文和英文</td>
        <td style="width:120px;">全是英文无标点</td>
    </tr>
    <tr >  
        <td style="width:120px;">你好这是中文。你好这是中文。你好这是中文。你好这是中文。</td>
        <td style="width:120px;">你好这是中文你好这是中文你好这是中文你好这是中文</td>
        <td style="width:120px;">This is all English. This is all English. This is all English.</td>  
        <td style="width:120px;">中英文混排的情况。Chinese and English.中英文混排的情况。Chinese and English.</td>  
        <td style="width:120px;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>  
    </tr>  
  </table>
  <br>
  <div style="word-wrap:break-word;width:200px;border:1px red solid;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
  <br>
  <div style="word-wrap:break-word;width:200px;border:1px #00FF33 solid;">中文中文中文中文中文中文中文中文中文中文中文</div