html的html表格表头固定有一行数据为什么会跟表头在一行上面

来源：蜘蛛抓取(WebSpider) 时间：2015-08-27 06:40 标签： html表格中的斜线表头
4行CSS实现表格内容超过一行的部分，用省略号代替
　　table-layout: &
　　white-space: &
　　overflow: &
　　text-overflow: &
本方法用于解决表格单元格内容过多时的美观问题，主要涉及到4句样式：
1. table-layout: fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，fixed一下就好了。（注意：此样式是关键）
2. white-space: nowrap 是为了保证无论单元格（TD）中文本内容有多少，都不会自动换行，此时多余的内容会在水平方向撑破单元格。
3. overflow: hidden 隐藏超出单元格的部分。
4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&& &
&html xmlns=&http://www.w3.org/1999/xhtml&& &
& & &style type=&text/css&& &
& & & & table &
& & & & { &
& & & & & & table-layout: &
& & & & & & width: 100%; &
& & & & } &
& & & & &&
& & & & td &
& & & & { &
& & & & & & white-space: &
& & & & & & overflow: &
& & & & & & text-overflow: &
& & & & & & background-color: # &
& & & & } &
& & &/style& &
& & &table& &
& & & & &thead& &
& & & & & & &th& &
& & & & & & & & 第一列 &
& & & & & & &/th& &
& & & & & & &th& &
& & & & & & & & 第二列 &
& & & & & & &/th& &
& & & & &/thead& &
& & & & &tbody& &
& & & & & & &tr& &
& & & & & & & & &td& &
& & & & & & & & & & &span&超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容&/span&&span&超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容&/span& &
& & & & & & & & &/td& &
& & & & & & & & &td& &
& & & & & & & & & & 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 &
& & & & & & & & &/td& &
& & & & & & &/tr& &
& & & & &/tbody& &
& & &/table& &html的表格元素默认不是占满一行，而是收缩到内容的大小？ - 跟谁学
搜索你想学的科目、老师试试，例如“声乐”搜索吉安
&&html的表格元素默认不是占满一行，而是收缩到内容的大小？最近在阅读 w3的规范文档，看到表格的部分是这样描述的 table(In HTML: TABLE)
Specifies that an element defines a block-level [p. 129] table: it is a rectangular
block that participates in a block formatting context [p. 138] 根据这个描述，表格默认应该是类似于block元素，占满一行才对，但实际上在 chrome测试，table的表现类似inline-block元素，是自动收缩的？那是我看漏了规范的哪个地方吗？ https://jsfiddle.net/m6mc6c3v/p2227RaUnicorn
大概是因为table-layout默认值是auto？
maybe你的测试代码不正确
有其他样式影响了
table默认是block level
相关问题大家都在看最新提问
关注我们官方微信关于跟谁学服务支持帮助中心

我要回帖

更多关于 html表格中的斜线表头 的文章

 

随机推荐