<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />
<title></title>
</head>
<body>
<style type="text/css">
.content{width:500pxmargin:0 autoheight:autoborder:1px solid #333background:#999}
</style>
<div class="content">我是自适应高度的内容哦.内容多了我就高度也就自动撑开了!我是自适应高度的内容哦.内容多了我就高度也就自动撑开了!我是自适应高度的内容哦.内容多了我就高度也就自动撑开了!我是自适应高度的内容哦.内容多了我就高度也就自动撑开了!我是自适应高度的内容哦.内容多了我就高度也就自动撑开了!我是自适应高度的内容哦.内容多了我就高度也就自动撑开了!我是自适应高度的内容哦.内容多了我就高度也就自动撑开了!我是自适应高度的内容哦.内容多了我就高度也就自动撑开了!</div>
</body>
</html>
如果是简单的表格，直上直下没有跨列或者跨行的：td { text-overflow:ellipsiswhite-space:nowrapoverflow:hidden} /* 设置不换行 省略号显示*/
然后只需要再给第一行的td分别加上class，例如：
<tr>
<td class="item1">单元格</td>
<td class="item2">单元格</td>
<td class="item3">单元格</td>
<td class="item4">单元格</td>
<td class="item5">单元格</td>
<td class="item6">单元格</td>
</tr>
然后，分别设置宽度
.item1 { width:20% }
....
.item6 { width:5% }
其他行同列的单元格会被撑开
比较复杂的有跨列或者跨行的表格，设置方法类似，但是就是要计算一下，比较麻烦。
1、新建一个html文件，命名为test.html。
2、在test.html文件中，使用div标签创建一个模块，在它的里面，再使用div创建另一个模块。
3、在test.html文件中，分别给两个div设置id属性，父元素div的id为one，子元素div的id为two，主要用于下面通过此id获得div对象。
4、为了展示出明显的效果，在css标签内，使用css设置两个div的样式（高度、宽度、背景颜色），父元素的高度比子元素的高度高100px。
5、在js标签内，通过id(one)获得父div对象，给它绑定click事件，当它被点击时，使用alert()方法输出“one click”。
6、在js标签内，通过id(two)获得子div对象，给它绑定click事件，当它被点击时，使用alert()方法输出“two click”，同时使用return false来禁止子元素事件再继续执行。
