当前位置：首页 → 问答吧 → 请教大家:table下长字符串回行与table-layout在webkit解释不同的问题

请教大家:table下长字符串回行与table-layout在webkit解释不同的问题

时间：2011-04-02

来源：互联网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{margin:0;padding:0;} body{font:12px/2 Tahoma, Arial, Helvetica, sans-serif; color: #666;} #wrap{width:500px;margin:0 auto;background:#ccc;text-align:left;} table{border-collapse:collapse;width:100%;border-spacing:0;word-wrap:break-word;table-layout:fixed} td,th{padding:0 10px;} </style> </head> <body> <div id="wrap"> <table> <tr> <th style="width:70px;background:red;">类别</th> <th>小说书名</th> <th style="width:120px;">更新时间</th> </tr> <tr> <td>[都市言情] </td> <td> 笨蛋魔法公主遇上... </td> <td>2011-04-02 13:33:48 </td> </tr> <tr> <td>[都市言情] </td> <td>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</td> <td> </td> </tr> </table> </div> </body> </html>
提示：您可以先修改部分代码再运行

大家看下"类别"这一块的宽度，在WebKit内核的浏览器下（例如safari,chrome）下宽度明显与ie.ff不一样，而是比他们窄
我查了下资料，是因为webkit下面对"table-layout:fixed"的解释不同造成的(他的计算方法是你设定的宽度减去他左右padding值为实际宽度)
但是在表格里我要让长字符串回行就要加这个这个属性，因为表格内不清楚那个地方会有长字符串所以不可能每个td/th都新加div截字

所以现在想请教高手，有没有好的解决方案
先谢过大家了

作者: DellGrass 发布时间: 2011-04-02

table-layout:fixed;
word-break:break-all;
word-wrap:break-word;

作者: qp3db 发布时间: 2011-04-02

非常感谢你回贴，虽然跟我问的没什么关系。

作者: DellGrass 发布时间: 2011-04-02