table表格th,td(头部、内容)自动换行的问题

table表格th,td(头部、内容)自动换行的问题

在html中经常使用表格，如果表格内容过长，我们希望它能自动换行。网络上搜索各种解决方案，都告诉你使用word-break : normal | break-all | keep-all，然并卵！

本次我在做报表时，使用了多种办法，终于得到一点总结，现在记录如下。

首先，你的table必须对全部的th、td进行列宽控制，代码如下：

<style type="text/css" mce_bogus="1">  
              table td{
                     white-space:pre-wrap;   // 保留空白符序列，但是正常地进行换行。
                     word-wrap: break-word;  //在长单词数字或 URL 地址内部进行换行
                }
                
                table th{
                     white-space:pre-wrap;   // 保留空白符序列，但是正常地进行换行。
                     word-wrap: break-word;  //在长单词数字或 URL 地址内部进行换行
                }
    </style>

其次，对你的具体的table使用以下样式控制：

<table border="1" class="tab_css_1" style="table-layout:fixed;">

当然，上面的代码你还可以控制固定长度，这个不冲突。不过需要注意的是，你的表格总长度不够的话，很多文字可能会被压缩到一起。

最后，具体要文字自动换行的列再控制下：

实现效果：