设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" 即可
但这种情况下表格宽度自由分配，所以如果不用设置table 的 style="table-layout:fixed;"直接使用下面的代码也可以实现换行
word-wrap:break-word;word-break:break-all;
案例
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table style="TABLE-LAYOUT: fixed" border="1" cellspacing="0" cellpadding="0" width="200"> <tbody> <tr> <td style="WORD-WRAP: break-word" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td> <td>aaaaa</td> </tr> <tr> <td style="WORD-WRAP: break-word" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td> <td>aaaaa</td> </tr> </tbody> </table> |
例子二
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table border="1" cellspacing="0" cellpadding="0" width="200"> <tbody> <tr> <td style="word-wrap:break-word;word-break:break-all;" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td> <td>aaaaa</td> </tr> <tr> <td style="word-wrap:break-word;word-break:break-all;" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td> <td>aaaaa</td> </tr> </tbody> </table> |
比较好的写法
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#soft-intro table{border:1px solid #cccccc; border-collapse:collapse; text-align:center; margin-top:0.54em; clear:both;width: 100%;} #soft-intro table th,#soft-intro table td{padding:8px; border:1px solid #dddddd;line-height:22px; text-align:left} #soft-intro table th{background:#f9f9f9;} #soft-intro table thead, #soft-intro table.jbborder tr {background-color:#fff;} #soft-intro table tr:nth-child(even){background-color:#f9f9f9} #soft-intro table tbody tr:hover {background: rgba(255,255,153,.4)} #soft-intro table th img{display:block; margin:5px auto 0;} #soft-intro table td{text-align:left;word-wrap:break-word;word-break:break-all;} #soft-intro table td.version{font-weight:bold;} #soft-intro table pre{width:auto;margin:0;padding:0;border:0;background:transparent} #soft-intro table td p{margin:0; padding:0;line-height:22px;word-wrap:break-word;word-break:break-all;} #soft-intro table ul{margin-top:2px;} |
