如何保证table表格不被撑开（固定HTML表格宽度）

为了更好地说明，我们先看下面的代码：

<table border="0" cellpadding="5" cellspacing="1" bgcolor="#add3ef">
<tbody>
<tr bgcolor="#eff3ff"> 
<td width="100">网站源码</td> 
<td width="200">护栏厂家网站源码</td> 
<td width="200">http://www.webym.net/aspshow201567511.html</td> 
<td width="300">护栏厂家网站源码采用淡蓝色风格模板，是基于asp+access架构开发的企业网站，适合致力于护栏产品设计与开发的公司制作网站使用。这款栏杆公司整站代码编写十分高效，运行速度快，带完整网站后台，管理方便，源代码完全开源，支持任意修改，针对搜索引擎特别优化，提升收录效果，源码永久使用，为您的护栏方面的建站节约成本。</td> 
</tr> 
<tr bgcolor="#eff3ff"> 
<td width="100">网站源码</td> 
<td width="200">卖手机网站源码</td> 
<td width="200">http://www.webym.net/aspshow201562499.html</td> 
<td width="300">%77%77%77%2E%77%65%62%79%6D%2E%6E%65%74%77%77%77%2E%77%65%62%79%6D%2E%6E%65%74%77%77%77%2E%77%</td> 
</tr> 
<tr bgcolor="#eff3ff"> 
<td width="100">网页制作教程</td> 
<td width="200">找回SQL Server密码</td> 
<td width="200">http://www.webym.net/jiaocheng/161.html </td> 
<td width="300">相信很多人都跟我一样不管是什么账号，如果很久不用就会忘记登录密码，像数据库SQL Server2008也一样有用户名和登录密码，下面就分享一下如何找回或修改SQL Server2008密码。</td> 
</tr>
<tr bgcolor="#eff3ff"> 
<td width="100">网页制作教程</td> 
<td width="200">随机记录数据</td> 
<td width="200">http://www.webym.net/jiaocheng/97.html</td> 
<td width="300">关于使用ASP随机查询数据库中的数据，有两种两见的数据库，即Sql Server和 Access。</td> 
</tr>
</tbody> 
</table>

这个table表格里面有一列是字符串，这个是很长一串字符，没有空格。所以它会把表格撑得很长。运行效果如下图：

这时候，如果我们希望把字符串自动换行，就需要加入下面的代码：

<style> 
 table { table-layout:fixed; word-break: break-all; word-wrap: break-word;}  
</style>

其中table-layout:fixed 表示：列宽由表格宽度和列宽度设定。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

其中word-break:break-all 表示：word-break 属性规定自动换行的处理方法。break-all允许在单词内换行。

其中word-wrap: break-word 表示：word-wrap 属性允许长单词或 URL 地址换行到下一行。break-word就表示在长单词或 URL 地址内部进行换行。相关阅读：如何用css防止表格table变形

显示效果如下：

其实table-layout, word-break, word-wrap这三个属性都是关于固定宽度显示控制的。

对一般的浏览器来说，只需要其中一个就可以完成控制了：

<style>  
  table { word-wrap: break-word; }  
</style>

但是，一般我们还是会把三个属性都加上，这样以保证对所有的浏览器都兼容。

好了，如何利用css固定table表格的宽度就介绍到这里。

源码推荐：金融管理师协会网站源代码、饰品网站源码