开发者学堂课程【CSS 快速掌握:Border-collapse】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/611/detail/9206
Border-collapse
内容介绍
一、border-collapse 简介
一、border-collapse 简介
这个属性主要是用于来合并边框线 其值为:collapse
border-collapse : collapse;
例子:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>
合并表格的边框线</title>
<style type=”text/css”>
table{
border-collapse:collapse;
/*
给边框设置颜色*/
border-color:#ccc;
</head>
<body>
Table>tr*10>{ :}*10
</body>
</html>
< ! DOCTYPE htmI>
<html lang="en">
<head>
<meta charset= "UTF-8">
<title>
使用CSS3 中的结构伪类选择器来实现隔行变色的表格</title>
<style type="text/css"> I
table{
border- collapse: collapse;
}
table tr:nth- child(even){
background-color: #f00;
}
table tr:nth- child(odd){
background-color: #00f;
}
/*
当鼠标移动到 tr 上面的时候显示背景颜色为#ccc*/
table tr:hover{
background-color: #ccc;
}
</style>
</head>
<body>
<table width="500” border="1" align="center">