我才12岁 ?

今天遇到一个问题，就是表格里边如果有一连串的英文字符的话会把table破坏，以前基本上没考虑过这种极端情况，感觉解决它的成本太高啦。问了明城，知道了这个问题怎么搞定，跟大家分享一下，也许你们都知道啦，不过我还是第一次用这个属性哈。

首先来看下HTML代码：

<table>
    <tbody>
        <tr>
            <td width="100">看！</td>
            <td>oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</td>
        </tr>
    </tbody>
</table>

CSS Code：

table { width:200px; border:1px solid #ccc; border-collapse:collapse;
td { border:1px solid #ccc;}

预览一下，可以看到如下图所示的那样，table的限制不起作用，而且前边td的宽度也被占用：

首先是解决ie下的问题，就是为td添加word-break:break-all;的样式，可以强制ie下换行，但是在对Firefox却毫无作用，Firefox下需要对table使用table-layout来解决：

CSS Code：

table { width:200px; border:1px solid #ccc; border-collapse:collapse; table-layout:fixed;}
td { border:1px solid #ccc; word-break:break-all; overflow:hidden;}

OK，就这样解决了布局被破坏的问题，ie折行，而Firefox（Opera与其相同）下会隐藏掉多余的部分。如下图分别为ie和Firefox下的表现：

引用一段话，简要的介绍下table-layout：

tableLayout 属性用来显示表格单元格、行、列的算法规则。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

标签： table-layout

这篇文章发布于 2009年02月19日，星期四，21:04，归类于 编码。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。