网站首页 >> 全部技术文档 >> 网页设计 >> Dreamweaver
为什么表格会被撑大?
发布时间: 2006-1-13 10:45:00 阅读次数:

为什么表格会被撑大?
解决思路
这个问题一般发生在单元格内容中出现不间断的英文或者标点符号时就不会自动换行,表格被撑得很大,所以问题的关键在于设置让它自动换行或强制换行。 
具体步骤
给表格定义以下CSS属性:

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

完整代码示例:

    <table style="table-layout:fixed;word-wrap:break-word;word-break:break-all;border:1px solid #000000;width:200px">
    <tr><td><script>document.write(new Array(267).join("!"))</script></td></tr>
    </table>

提示:代码
<script>document.write(new Array(267).join("!"))</script>

的作用在浏览器中输出266个叹号"!"
特别提示
未定义CSS之前,单元格内的内容不会自动换行,而定义之后在定义的宽度边界外强制换行,效果分别如图 1.2.30、图1.2.31所示。


图1.2.30 内容不换行的表格

图 1.2.31 强制内容换行的表格

特别说明


本例用到表格的CSS属性 table-layout 、word-wrap和word-break 属性。
table-layout 设置表格的布局算法。fixed:固定算法。
    word-break 设置单词内的换行行为,特别是对象中出现多语言的情况。break-all:依照亚洲语言和非亚洲语言的文本规则,允许在字内换行,也允许非亚洲语言文本行的任意字内断开。
    word-wrap 设置当当前行超过指定容器的边界时是否断开转行。break-word:内容将在边界内换行。
上一篇:表单的提交方式POST和GET有什么区别 下一篇:怎样用表格做XML数据的绑定

推荐专题
网站今日最新
·用Flash制作魔法表情
·避开QQ聊天时遭受攻击的安
·QQ消息炸弹原理解析及防御
·娱乐性更强!QQ2006
·玩转QQ之QQ2006新招
·更新换代QQ Mail 3
·让QQ自动释放内存 让聊天
·QQ教程:用QQ录制GIF
·QQ教程:用批处理找出没聊
·免费的系统安检中心-QQ安
本类推荐
热门文章
用Flash制作魔法表情
心得总结:Java性能优化技
更有Photoshop的感觉
全新界面:QQ2006珊瑚虫
AJAX实例:根据邮编自动完
张雅涵手绘性感美眉插画 图






本类今日更新:
·表单的提交方式POST和GET有什么区别
·为什么表格会被撑大?
·怎样用表格做XML数据的绑定
·如何制作类似Windows系统中的选项卡的效果
·如何做单元格背景颜色黑白交替的表格
·如何实现把鼠标移到一个表格上的时候表格一列的背景变色
·在Dreamweaver中精细化你的表格外观
·优秀网页设计速查与赏析
·Dreamweaver8新功能 建立XSLT页可视化操作XML数据(二)
·Dreamweaver8新功能 建立XSLT页可视化操作XML数据(一)
相关文章:
·为什么表格会被撑大?
·如何做单元格背景颜色黑白交替的表格
·AutoCAD 2005 在线视频教程 - 绘制图形中的插入表格
·ASP系列讲座(十五)使用 HTML 表格
·去除DW MX 2004表格宽度辅助
·细品DW MX 2004表格设计
·表格特效代码全集中
·Dreamweaver MX 2004 打造细线表格

打印本页 | 关闭窗口