作者:唇边那烟味世界 | 来源:互联网 | 2020-08-02 01:49
在前端开发中,html表单是经常被使用到的,表单可以直观的把信息展现出来,有很好的交互功能;在表单中可以把同一类的信息合并在一起显示,这就需要把同一类的单元格合并在一起,那么怎样才能用css合并单元格。本章给大家介绍css如何实现table表格的单元格合并?colspan和rowspan合并单元格(实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
在前端开发中,html 表单是经常被使用到的,表单可以直观的把信息展现出来,有很好的交互功能;在表单中可以把同一类的信息合并在一起显示,这就需要把同一类的单元格合并在一起,那么怎样才能用css合并单元格。本章给大家介绍css如何实现table表格的单元格合并?colspan和rowspan合并单元格(实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
我们先建立一个简单的表单:
班级 |
姓名 |
年龄 |
电话 |
601班 |
Jack |
24 |
1351234567 |
601班 |
Tom |
22 |
1351234567 |
602班 |
Rose |
22 |
1351234567 |
602班 |
张三 |
25 |
1351234567 |
602班 |
李四 |
25 |
1351234567 |
rowspan属性用在td标签中,用来指定单元格纵向跨越的行数。
例:我们可以把两个显示601班的单元格合并在一起,三个显示602班的单元格合并在一起:
班级 |
姓名 |
年龄 |
电话 |
601班 |
Jack |
24 |
1351234567 |
Tom |
22 |
1351234567 |
602班 |
Rose |
22 |
1351234567 |
张三 |
25 |
1351234567 |
李四 |
25 |
1351234567 |
rowspan="2"表示从设置的td单元格开始向下合并两个单元格(本身一个,加上另外一个);rowspan="3"表示从设置的td单元格开始向下合并三个单元格(本身一个,加上另外两个)。
2、css横向合并table表格单元格
colspan属性用在td标签中,用来指定单元格横向跨越的列数。
例:我们可以把显示姓名和年龄两个单元格放在一起显示为姓名和年龄:
班级 |
姓名和年龄 |
电话 |
601班 |
Jack |
24 |
1351234567 |
Tom |
22 |
1351234567 |
602班 |
Rose |
22 |
1351234567 |
张三 |
25 |
1351234567 |
李四 |
25 |
1351234567 |
colspan="2"表示自左向右合并两个单元格。
以上就是css如何实现table表格的单元格合并?colspan和rowspan合并单元格(实例)的详细内容,更多请关注 第一PHP社区 其它相关文章!