css表格和样式
来源:互联网 发布:南通醋酸纤维 知乎 编辑:程序博客网 时间:2024/05/20 14:44
表格的HTML标准为:
<table> <thead></thead> <tbody></tbody> <tfoot></tfoot></table>
一、border-collapse 设置表格的边框是否合并为一个单一的边框
separate 默认值,边框会被分开collapse 边框会合并成一个单一的边框,会忽略border-spacing和empty-cells
二、border-spacing 设置表格单元格边框之间的间距
三、caption-side 设置表格<border>标题<caption>的位置
top 默认值,标题在上方
bottom 标题在下方
eg.table{
caption-side:bottom;
}
四、empty-cells 是否显示表格中空单元格
hide 不在空单元格周围绘制边框
show 在空单元格周围绘制边框,默认
五、table-layout 该属性指定了完成表布局时所用的布局算法。
fixed 固定表格布局:
固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。
在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。
通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。
automatic/auto 默认,自动表格布局:
在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。
此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。
固定布局算法比较快,但是不太灵活,而自动算法比较慢,不过更能反映传统的 HTML 表。
六、vertical-align 设置文本在垂直上的位置
1、top
2、middle
3、bottom
4、baseline 与基线对齐
以上四种只有在表格中使用,或display:table-cell时才有用
1、sub 垂直对齐文本的下标
2、super 垂直对齐文本的上标
以上两种对于任何位置的文本都有效
1、固定值px
2、百分比
以上两种对于任何位置的文本都有效,可以在控制行内元素在垂直方向上的位置。上面的两个值,
当你设为正值时,行内元素向上移动;当你设为负值时,行内元素向下移动。
1、text-top
2、text-bottom
3、middle
以上三种可用于在文本中插入图片时,规范图片在垂直方向上如何和文本对齐。
当使用middle规范图片与文本的对齐方式,最好设置一下文本的行高——line-height,使其的高度与图片的高度一致。
表格的具体使用
可以设置<table>的样式width:100%;这样可以使表格充分的充满整个规定空间
可以通过以下设置,设置表格的样式更加的炫酷:
<style> table tr:nth-child(2n){ background-color:#fafafa; } table tr:hover{ background-color:#eee; } </style>
0 0
- css表格和样式
- CSS 设置表格,表格样式
- css 表格样式
- CSS定义表格样式
- CSS控制表格样式
- 表格的css样式
- CSS样式表格
- CSS简单表格样式
- table表格css样式
- CSS样式-表格
- CSS 4.6 样式-表格
- CSS样式表格
- CSS设置表格样式
- css表格样式
- CSS设置表格样式,样式表格
- css实现虚线表格样式
- div+css普通表格样式
- CSS 表格样式-不错~~积累!
- css边框和背景设置
- java 集合类的小区别
- 递推——爬楼梯
- css3前缀、rem和浏览器css3支持版本
- AndroidMainfest.xml详解——<instrumentation/>
- css表格和样式
- 一篇文章让你看懂量化交易发展史
- 欢迎使用CSDN-markdown编辑器
- css阴影和轮廓
- pooling池化操作的代码详解
- linear-gradient和radial-gradient属性——css3渐变效果
- Android学习笔记-Android6.0运行时权限
- HTTP和HTTPS的区别
- 高性能JavcaScript读书笔记(一)