CSS样式_表格&轮廓
2016-04-09 10:02
309 查看
CSS表格
表格边框 [border]
table,th,td { border:1px solid blue; }
上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
如果需要把表格显示为单线条边框,请使用折叠边框(border-collapse)属性。
折叠边框 [border-collapse]
该属性设置是否将表格边框合并为单一的边框。该属性只针对table。取值为:seperate(默认), collapse注意: 如果没有规定!DOCTYPE, 则border-collapse可能产生意想不到的结果。
table { border-collapse:collapse; }
表格宽度和高度 [width], [height]
定义表格(table, th, td等)的宽度和高度table { width:100%; } th { height:50px; }
表格文本水平对齐 [text-align]
td { text-align:right; }
表格文本垂直对齐 [vertical-align]
td { height:50px; vertical-align:bottom; }
表格内边距 [padding]
设置表格中内容(th, td)与边框的距离td { padding:15px; }
表格文本颜色 [color]
设置表格(table, th, td)的文本颜色table { color:blue; } <!-- td的文本为蓝色 --> th { color:red; } <!-- th的文本为红色 -->
表格背景颜色 [background-color]
设置表格(table, th, td)的背景颜色table { background-color:blue; } <!-- td的背景色为蓝色 --> th { background-color:red; } <!-- th的背景色为红色 -->
单元格边框间距 [border-spacing]
该属性设置相邻单元格的边框间的距离注意: 仅用于“边框分离”模式
table.two { border-collapse: separate; border-spacing : 10px 50px; <!-- 水平间距10px, 垂直间距50px --> }
表格标题的位置 [caption-side]
设置表格标题放置的位置,取值可为top, bottom。caption { caption-side:bottom }
是否显示空单元格 [empty-cells]
设置是否显示空单元格,取值可为hide, show。注意: 仅用于“边框分离”模式
table { border-collapse: separate; empty-cells : hide; }
表格布局 [table-layout]
此属性设置表格的行、列将如何显示,取值可为fixed, automatic。固定布局算法比较快,但是不太灵活,而自动算法比较慢,不过更能反映传统的HTML表。
table.one { table-layout: automatic }
布局类型 | 特点 |
---|---|
固定表格布局 | 固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。 在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。 通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。 |
自动表格布局 | 在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。 此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。 |
CSS轮廓
轮廓颜色 [outline-color]
p { outline-color:#00ff00; }
轮廓样式 [outline-style]
p { outline-style:dotted; }
轮廓宽度 [outline-width]
p { outline-width:thick; }
以上的属性可简写与
outline,如:
p { outline:#00ff00 dotted thick; }
更多请参考:W3School
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- 表格标签table深入了解
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析