项目中数据大多以表格形式呈现,这也就要求我们能够做出各式各样的表格,以前不太用表格,用的话也只是简单的形式,所以在第一次做表格的时候简直大写的懵逼,后来在网上学习了之后再加上自己的理解写了这篇博客,能够轻松解决表格问题,希望大家指点。
1. HTML中的表格
在HTML中,table元素中往往包含一个完整的表格,简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。复杂的表格还由其他内容组成,分别是thead,tbody,tfoot,caption等,从字面意思很容易理解为表头,表体,表底,caption表示标题。如果不加这些元素,直接在table里写tr td等代码在浏览器渲染过程中会自己加上tbody标签,默认为全部为表体内容。有时候为了css代码简便常常th用td代替,下面我给出的例子都只用td。
2.表格几个比较常用的属性
border-collapse与 border-spacing
前者是为表格设置合并边框模型,后者是设置相邻单元格的边框间的距离,具体是什么意思呢?下面我给出例子:
title>border-collapse:collapse;
border-spacing:0;
}
table thead tr th{
font-weight:bold;
background-color:#8EB4E3;
}
table td,table th{
height:20px;
border:1px solid #A6A6A6;
font-size:14px;
text-align:center;
}style>
head>
姓名th> 成绩th> 排名th>tr>
thead>
小李td> 99td> 1td>tr>
小王td> 96td> 2td>tr>
小张td> 92td> 3td>tr>
tbody>
table>
body>
html>
样式为:
没错,是最简单的样式,如果把border-collapse去掉就会变成这样:
是因为td之间的边框线重叠了。如果把两个都去掉就会变成这样:
所以要么两个都写上,要么只写一个 border-collapse: collapse;否则会出问题的。
* rowspan与colspan
从字面看就是合并单元格的意思,表格有很大的变化性,但是怎么能好好掌握它呢?哈哈,我给大家讲一波。首先要看清这两个属性,一个是对行一个是对列,这两个元素是针对td来说的,来看看这个表格。
其中a,b,c占了两行,d跨了五列,e,f各跨四列,代码这样写:
atd> btd> ctd> dtd> etd> ftd>tr>
gtd> htd> itd> jtd> ktd> ltd> mtd> ntd> otd> ptd> qtd> rtd> std>tr>
thead>
对于这种复杂的样式应该遵守一个从上到下从左到右的顺序,先写a,b,c,这三个没有什么太大的问题,下来写d,然后下来写什么呢,应该按行从左到右,对于连行的属性下一行横跨行的样式就不用再重复了。
3.其他表格样式
1.高度太高标题固定
css代码:
table{
width:100%;
border-collapse:collapse;
}
table tbody{
display:block;
height:300px;
overflow-y:scroll;
}
table td{
border:1px solid #A6A6A6;
height:23px;
text-align:center;
font-size:12px;
}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
table thead {
width:calc( 100% - 1.05em );
font-weight:bold;
background-color:#8EB4E3;
}
tbody必须设置为一个块元素,因为它是一个块的形式运动的,必须设置高度也就是视觉看到的呈现出来的高度,并且超出部分以滚动条的形式呈现,这一点是非常重要的。虽然tbody是个块但是里面的tr相对tbody来说还是以表格的形式,thead里面的元素也需要这样操作。有一个属性: table-layout:fixed;意思是列宽由表格宽度和列宽度设定,即是自适应的,如果去掉的话会发现是这样的效果:
但是加上之后还是会与下面的内容有所偏差,这就需要用 width: calc( 100% - 1.05em );这句来帮忙啦,1.05em是不断测试试出来的,calc适用于流体布局,用于设置宽之类的,不用考虑元素的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。
2.宽度太宽横向滚动条
代码:
table_grid{
overflow:scroll;
}
table{
width:200%;
}
因为要把table当作一个整体,所以需要给table的父元素设置一个属性(table_grid)overflow: scroll;,table的宽度要设置得大一点,这个道理很简单。
最近进度太慢,都在忙着做项目,我得抓紧学后台了,加油啊!!!