现在的位置: 网页制作教程网站制作经验 >正文
CSS

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

发表于2016/10/29 网站制作经验 0条评论 ⁄ 热度 9,374℃
导语:在HTML页面建立一个表格,如果表格里的内容出现很长一串字符,表格就会被撑开,整个页面就会被打乱,会非常难看。本文介绍如何利用CSS样式固定表格宽,从而不被撑开。

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

<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表格的宽度就介绍到这里。

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

  • 暂无评论