前几天部门一同事来找我，说后台公告那里有点问题。如下图：

至于是什么问题呢？看图就知道排版不对称。唉，也不知道这后台信息是谁录入的，产生了这么多冗余代码，如图：

泪奔~。排版这活都不是事儿，想要什么样的布局我给你整什么样的，包你满意！

稍微思考了下布局方面，决定一行显示一条信息，这样的话，排版用table是再好不过的了。虽然洒家很厌恶table吧，但特殊场合也得特殊对待。附一张效果图：

怎么样，看着是不是舒服很多？

如果你以为本文就为了这个芝麻大的布局而单独写一篇文章的话，那就大错特错了。下面来分享下table布局中常见的一些问题及解决方案。（注：边框，间距，背景色等初级常见问题略过！）

相信初级排版的亲在使用table都很难解决一个宽度问题，例如：一行有多个“td”每个td的宽度都不一样，一旦某一个td的内容过多时，势必会影响左右两边的宽度，就算你外围的“table”设置了固定的宽度也没有效果。附一段源码：

<table cellspacing="0" cellpadding="0" style="width:500px;border:0;border-collapse:collapse;border-spacing:0;text-align:center;line-height:1.8;">
　<tr>
　　<td width="100px" bgcolor="#ccc">width="100px"</td>
　　<td width="200px" bgcolor="#999">width="200px"</td>
　　<td width="80px" bgcolor="#666">width="80px"</td>
　　<td width="120px" bgcolor="#ccc">width="120px"</td>
　</tr>
</table>

上面这段代码显示的是正常状态下，图如下：

下面来让问题重现，附源码：

<table cellspacing="0" cellpadding="0" style="width:500px;border:0;border-collapse:collapse;border-spacing:0;text-align:center;line-height:1.8;/*table-layout:fixed;word-wrap:break-word;*/">
<tr>
　　<td width="100px" bgcolor="#ccc">width="100px";bgcolor="#ccc"</td>
　　<td width="200px" bgcolor="#999">width="200px";bgcolor="#999"</td>
　　<td width="80px" bgcolor="#666">width="80px";bgcolor="#666"</td>
　　<td width="120px" bgcolor="#ccc">width="120px"; bgcolor="#ccc"</td>
　</tr>
</table>

附效果图：

怎么样，看到了吧，table设置的500宽度显然没有起到作用。不用怀疑你是不是输入法的问题，是因为你没有设置table的私有属性

table-layout:fixed（fixed：固定布局的算法）

下面再来看下添加了该属性后的效果图：

怎么样，还是原来的table,还是原来的500宽度。此时细心的亲会发现一个问题，就是内容重叠了，的确是的。如果我不写那么多的内容，你怎么在阅读此文后立马掌握了两个新技能呢？！从上面的效果可以看出，我们需要将内容自动换行，新技能如下：

word-wrap:break-word（break-word：内容将在边界内换行）

再来看下最终的效果如何：

怎么样，解决了吧。至于英文断词的现象，见明日文章《CSS文本换行详解》

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2014-06-17/161.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。